Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Técnicas avanzadas con CSS3

Swwweet
January 25, 2012

Técnicas avanzadas con CSS3

Presentación realizada en SeedRocket en marzo de 2011.

Swwweet

January 25, 2012
Tweet

More Decks by Swwweet

Other Decks in Programming

Transcript

  1. hardboiled ¿Le gustaré a @4lexcat? :-) “To hell with being

    graceful” Andy Clarke Harboiled Web Design
  2. hardboiled Paso de la imagen de fondo ¿Le gustaré a

    @4lexcat? :-) “To hell with being graceful” Andy Clarke Harboiled Web Design
  3. h1 a{ color: rgba(179,45,71,.75); } #navigation li a{ background: rgba(170,178,192,.75);

    } #content{ background-color: rgba(14,32,59,.5); } http://24ways.org
  4. hsl HUE: grado de la rueda de color. 0º es

    rojo. SATURATION: porcentaje de saturado (100%) a gris (0%) LUMINOSITY: porcentaje de negro (0%) a blanco (100%).
  5. nav li{ box-shadow: 0 2px 8px -3px rgba(0, 0, 0,

    .5), inset 0 1.4em 2em -0.7em rgba(255, 255, 255, .3); } http://bit.ly/viajartiempo
  6. .boton{ box-shadow: 0 1px 0 #E87754, 0 2px 0 #BD4019,

    0 3px 0 #AE3B17, 0 5px 0 #9F3615, 0 7px 0 #903113, 0 8px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } http://bit.ly/viajartiempo
  7. h1{ text-shadow: 0 0 10px white, 0 0 20px white,

    0 0 30px white, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #FF00DE; } http://bit.ly/text-shadows
  8. h1 .c{ text-shadow: 0px 0px #FE8, 0px 2px #EB0, 0px

    1px #FE8, 0px 3px #EB0, -1px 2px #FE8, -1px 4px #EB0, -1px 3px #FE8, (...) -4px 26px #EB0; } http://beercamp.com/2010
  9. input#submit{ background: url(download-arrow.png) no-repeat 0px 50%, #95DC2F linear-gradient (top, #8BD225

    0%, #BCF26F 50%, #8BD225 50%, transparent 100%); } http://modernizr.com
  10. html{ background-color:#FFECD0; background-image: linear-gradient (-45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent

    50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent); background-size: 100px 100px; } http://leaverou.me
  11. columns .box{ column-count: 2; } Lorem ipsum dolor sit amet,

    consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a e n i m n o n f e l i s c o m m o d o elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin, tortor eros interdum libero, et condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet lorem. Integer est orci, sollicitudin quis fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. Proin egestas malesuada pharetra. Sed arcu ante, adipiscing sit amet semper vel, aliquet sit amet nunc.
  12. columns .box{ column-gap: 100px; } Lorem ipsum dolor sit amet,

    consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a enim non felis commodo elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin, tortor eros i n t e r d u m l i b e r o , e t condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet lorem. Integer est o r c i , s o l l i c i t u d i n q u i s fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. Proin egestas malesuada pharetra. Sed arcu ante, adipiscing sit amet semper vel, aliquet sit amet nunc.
  13. columns .box{ column-rule: 1px solid black; } Lorem ipsum dolor

    sit amet, consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a e n i m no n fe l is co m mo d o elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin, tortor eros interdum libero, et condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet l o r e m . I n t e g e r e s t o r c i , sollicitudin quis fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. P ro i n e g e s t as mal e su ada p h a r e t r a . S e d a r c u a n t e , adipiscing sit amet semper vel, aliquet sit amet nunc.
  14. #intro nav li{ background: rgba(5, 129, 121, .8); } #intro

    nav li:nth-child(2){ background: rgba(224, 80, 35, .8); } #intro nav li:nth-child(3){ background: rgba(238, 165, 27, .8); } #intro nav li:nth-child(4){ background: rgba(94, 79, 58, .8); } #intro nav li:nth-child(5){ background: rgba(173, 165, 53, .8); } http://bit.ly/viajartiempo
  15. pseudo-elements p:after{ content:‟es un gato”; color: #D35529; } Oslo es

    un gato Quinto es un gato <p>Oslo</p> <p>Quinto</p>
  16. #signin form:before{ content: "{"; font-size: 15em; color: #BE3F9E; position: absolute;

    top: -15px; left: -100px; } #signin form:after{ content: "}"; font-size: 15em; color: #BE3F9E; position: absolute; top: -15px; right: -100px; } http://freelancebcn.com
  17. #intro nav li{ position:relative; } #intro nav li:before{ content: "";

    position: absolute; left: 0; bottom: -8px; border: 10px solid black; border-color: transparent rgb(5, 129, 121); border-width: 0 8px 8px 0; } http://bit.ly/viajartiempo
  18. .banner h3 a{ background: url(banner.png) 0 0 no-repeat; transition: all

    0.3s ease-in-out; } .banner h3 a:hover { margin-right: -10px; text-indent: 10px; background: url(banner.png) 10px 0 no-repeat; } #imagery .photos li { transition : all .2s ease-in-out; } #imagery .photos li:hover { transform: rotate(2deg) scale(1.1); } http://nordicruby.org
  19. http://www.flickr.com/photos/soonerpa/4220518842 http://www.flickr.com/photos/gregheo/5321202672 http://www.flickr.com/photos/wainwright/351684037 http://www.flickr.com/photos/joeshlabotnik/4749975148 http://www.flickr.com/photos/tetzl/178374065 http://www.flickr.com/photos/cibomahto/2291127824 http://www.flickr.com/photos/st3f4n/4448140377 http://www.flickr.com/photos/blubrblog/4326100513 http://www.flickr.com/photos/lucynieto/2536364522 http://www.flickr.com/photos/tainara/314471333

    http://www.flickr.com/photos/adman_as/3507892529 http://www.flickr.com/photos/archer10/2216791949 http://www.flickr.com/photos/rohdesign/4444113922 http://www.flickr.com/photos/lycid/1515574003 http://www.flickr.com/photos/stevedave/3566325269 http://www.flickr.com/photos/aftab/3364835006 http://www.flickr.com/photos/rhinoneal/4353519405 créditos