More Related Content Similar to Look ma! No images! (20) More from Lennart Schoors (6) Look ma! No images!2. Me
. web designer at Massive Media
http://massivemedia.eu
. personal site at http://lensco.be
. @lensco
9. Nice gimmick to show off
your 1337 skillz !!1!
But there's some real value
here as well...
11. 1. Performance
. smaller overal filesize (but not always,
mind you!)
. the iOS icons example:
56K (not g-zipped)
. fewer HTTP requests
22. Triangles: using gradients
background:
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.5,transparent), color-stop(.5, yellow)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.5,transparent), color-stop(.5, yellow)),
-webkit-gradient(linear, 0 0, 100% 0, from(yellow), to(yellow));
background:
-moz-linear-gradient(-45deg, transparent 50%, yellow 50%),
-moz-linear-gradient(45deg, transparent 50%, yellow 50%),
-moz-linear-gradient(yellow, yellow);
background-position: 0 0, 0 100%, 10px 0;
background-size: 10px 50%, 10px 50%, 100% 100%;
Better anti-aliasing, but verbose & cumbersome!
24. HTML elements
. div, span, p, a, ... whatever suits best
. try to avoid extra/empty/unnecessary
elements
26. Example: date ribbon
.date {
background: #fc0;
position: relative;
}
.date:before,
.date:after {
content: " ";
position: absolute;
border-top: 5px solid #fc0;
border-left: 15px solid transparent;
bottom: -5px;
right: 0;
}
.date:after {
border-left: none;
border-right: 15px solid transparent;
right: auto;
left: 0;
}
35. Your good friend Internet Explorer.
. Various levels of support
triangles: IE6, border-radius: IE9, ...
. If you only aim for IE9+ support, go nuts.
. Google dropping support for IE7 this
summer.
. Do websites have to look the same in
every browser?
. My motto: If it works, it works.™