280 logoBack to home page
DART 430

 

 

OK—here's my quick list of basic CSS3 techniques. This was inspired by the WebCredible list but all its demos are gone. Vendor prefix or not? Here's your answer (with example code and More info links)

1. border-radius: 5px; Demo

 
2. text-shadow: 1px 1px 2px #333; Demo
X, Y blur
 
3. box-shadow: 2px 2px 4px #666 Demo

4. @font-face { 

font-family: 'Lily Script One';
font-style: normal;
font-weight: 400; 
src: local('Lily Script One'),
local('LilyScriptOne-Regular'),
url(http://fonts.gstatic.com/s/lilyscriptone
/v4/uPWsLVW8uiXqIBnE8ZwGPK3fkYX5z1QtDUdIWoaa
D_k.woff) format('woff');
}

Demo

then h1 {
font-family: 'Lily Script One', cursive;
}

5. rgba (111, 222, 333, 0.5) Demo
6. animation with transition Demo
7. transform: Demo (better with image)
translate, rotate, scale, skew and others

8. text columns Demo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut gravida justo. Etiam id mauris pharetra, euismod sapien vitae, hendrerit nulla. Morbi lacus neque, euismod ut dui in, aliquam aliquam lacus. Proin tincidunt enim suscipit euismod laoreet. Sed et quam vel magna consectetur aliquam. Nam vehicula sit amet massa ac consequat. Nulla laoreet ornare eros.

Phasellus placerat sodales eros eget suscipit. Maecenas hendrerit sem ut enim blandit, id condimentum nulla facilisis. Ut vitae lorem eget odio ultrices ultricies. Donec maximus finibus pharetra. Vivamus consectetur lobortis tristique. Phasellus id imperdiet purus. Vivamus varius augue semper lacinia commodo.

9. gradients Demo