Pure CSS 3 3D text tutorial
Loading...
Uploaded by rvervuurt on Oct 4, 2011
Always wanted to know what awesome things you can do with CSS3? Well, here is one! In this 3 minute tutorial, I will show you how you can make text look like it's laying on top of your page.
You can see the result live here: http://www.rvervuurt.com/css_exp/
As you can see, you can select and even copy/paste the text, although copy/pasting won't copy the shadows.
As promised the bit of CSS I used for the final result in the movie:
Enjoy playing around with it and see you next time!
Portfolio: http://www.rvervuurt.com
----------------------------------------
text-shadow: 1px 1px 0px #ccc, 1px 2px 0px #c9c9c9, 1px 3px 0px #bbb, 1px 4px 0px #b9b9b9, 1px 5px 0px #aaa, 1px 6px 0px #9f9f9f, 1px 7px 0px #9a9a9a, 1px 8px 0px #989898, 0px 9px 1px rgba(0,0,0,.14), 0px 0px 5px rgba(0,0,0,.14), 0px 5px 5px rgba(0,0,0,.3), 0px 8px 8px rgba(0,0,0,.24), 0px 10px 7px rgba(0,0,0,.3), 0px 20px 10px rgba(0,0,0,.2), 0px 30px 20px rgba(0,0,0,.4);
7:29
CSS3 Tutorial - Learn the Five Most Popular Attributes in CSS3by VHOTraining1,261 views- 0:46
Wicked CSS3 3d bar chartby marcofoli09,934 views
- 9:00
Tutorial: CSS3 Ribbon Navigationby 08joejoi689 views
- 0:37
Animated wicked CSS3 3d bar chartby marcofoli06,262 views
- 2:01
CSS3 Walking Manby dolinski57,986 views
- 0:22
Star Wars Text Scroll vs CSS 3D Transforms (Safari 5+, Chromium 9+)by r08028807 views
- 1:40
Caterpillar Mutationsby Transfreak961,486,885 views
- 2:26
Bike trip (music by Mutual Benefit)by rvervuurt151 views
- 0:58
CSS3 Only Fancy Comments For WordPressby Deluxive125 views
- 11:06
Html5 and CSS3 Tutorialby ryanconn420,319 views
- 5:20
CSS3 Video Tutorialby ThinkVitaminTutorial2,898 views
- 7:40
CSS3 Rounded Corners Web Design Tutorial - Dreamweaverby DreamWeaverTutorial23,069 views
- 2:28
CSS3 Tutorial : CSS3 border gradientby css3tutorial900 views
- 48:15
Doctypehtml5-CSS3 And Presentation.mp4by axemclion38 views
- 0:48
CSS 3D Transform - CSS3.infoby css3info28,422 views
- 1:42
HTML5 and CSS3by PragProg19,808 views
- 0:38
"CSS3 Text, Shapes, and Objects Animation" by Kenny L Keysby JavaScriptStyleSheet69 views
- 5:40
Simple 3D Transition with Adobe Edge (Tutorial)by roman01la4,868 views
- 8:26
Dreamweaver Tutorial - CSS3 Box Shadowsby DreamWeaverTutorial26,383 views
- 9:37
CSS Tutorial Pt 1 - Basic Layoutby 2createawebsite267,095 views
Link to this comment:
All Comments (1)