HTML and CSS Reference
In-Depth Information
#ad {
position: relative;
width: 100%;
height: 100%;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class='adContainer'>
<div id='ad'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body>
</html>
There are quite a few CSS3 features. I'll review many more emerging CSS3 submissions from vendors like Adobe
and Google, including shaders, filters, regions, and exclusions, in Chapter 12. But start playing with them today—if
for no other reason than just to test their performance and add some pizzazz to your ads. A good place to start digging
deeper is
http://css3clickchart.com
,
which outlines both common and emerging CSS features. If you're interested
in learning more about CSS3 animations, Dan Eden's
Animate.css
(
http://daneden.me/animate
)
is a great tool for
getting started quickly—but as always have a graceful failback because it may not work everywhere.
If you've followed along, you'll see it's fairly simple to create a straightforward advertisement that looks pretty
good by just adding some simple CSS. You saw everything from adding multiple background images, rounding
corners, adding gradients, and even transitions and transforms leveraging a bit of JavaScript for control. Use all of
these tools to your advantage, and you'll be able to come up with some really amazing ads to wow your clients.