Abusing The Web with CSS3

New Selectors

W3C Selectors table, jQuery Selectors reference


    a:not('.className') {
      /* crazy round corners */
    }
    
    input[class*=wrapper] {
      /* explosive gradients */      
    }
    
    input:disabled {      
      /* AMAZING transforms */
    }

Background Size

    section {
      background: url("http://localhost/exploding-wordpress-with-css3/media/logo/bocoup-horizontal-614.png");
      background-size: 50% auto;
    }

@font-face

Google webfonts, Font Squirrel, Bulletproof @font-face

    @font-face {
    	font-family: 'QikkiRegRegular';
    	src: url('Qarmic_sans_Abridged-webfont.eot');
    	src: local('â˜º'), url('Qarmic_sans_Abridged-webfont.woff') format('woff'), url('Qarmic_sans_Abridged-webfont.ttf') format('truetype'), url('Qarmic_sans_Abridged-webfont.svg#webfontMNmi4OG2') format('svg');
    }

    body {
      font-family:'QikkiRegRegular';
    }

Text Shadow

I am some interesting text.

    p {
      text-shadow : 1px 3px 3px #333333;           
    }

    p {
      color:#000;
      text-shadow : 0px 1px 0 #FFFFFF;   
    }
    
    p {      
      color:#112245;
      text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
    }

Box Shadow

I ❤ inset

    p {
      -webkit-box-shadow : 0 1px 3px #444 inset;
      -moz-box-shadow : 0 1px 3px #444 inset;      
    }

Gradients

MDC Gradients, Webkit Radial Gradients

  body {
    background-image: -moz-radial-gradient( 50% 30% 90deg, circle, #006EA0 0%, #304160 600px);
    background-image: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 600, from(#006EA0), to(#304160));
  }
  
  /* Terse Moz syntaxt */
  body {
    background-image: -moz-radial-gradient( #006EA0, #304160);
  }

Transforms

MDC Transforms

    .preso section {
      -moz-transform: translate(-200%, 0);
      -webkit-transform: translate(-200%, 0);
    }

    .preso section.rotate {
      -moz-transform: scale(0.1) rotate(-120deg);
      -webkit-transform: scale(0.1) rotate(-120deg);
    }

    .preso section[aria-selected] {
      -moz-transform: scale(1.0) translate(0, 0);
      -webkit-transform: scale(1.0) translate(0, 0);
    }

Transitions

MDC Transitions, Transitionable Props

  section {
    -moz-transition-property: position
    -moz-transition-duration: 2ms;
    -moz-transition-timing-function: cubic-bezier(0.42, 0.0, 0.58, 1.0);
    -moz-transition-delay: 0.2s, 0.2s;
  }

Animations

HTML5 Logo

    @-moz-keyframes changecolors {
      0% {
        color: gray;
        top: 100px;
      }
      100% {
        color: #bada55;
        top:0;      
      }
    }

    .targetElem {
      -moz-animation: changecolors 10s infinite linear;
    }

Columns

Robert O'Callahan's blog

  p {
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    height: 200px;
  }

Lorizzle ipsum dolor bow wow wow amizzle, sizzle adipiscing elit. Nullam sapien stuff, mah nizzle volutpizzle, suscipizzle quis, my shizz vel, daahng dawg. Pellentesque tortizzle. Sed the bizzle. That's the shizzle at dolizzle dapibus gangster tempus mah nizzle. Maurizzle yo mamma nibh ass turpis. Fo izzle . Pellentesque things rhoncizzle i'm in the shizzle. In hizzle habitasse platea dictumst. Mammasay mammasa mamma oo sa pizzle. Curabitur tellus urna, pretium stuff, mattizzle fo shizzle my nizzle, eleifend vitae, nunc. Things suscipizzle. Check out this sempizzle velizzle sed the bizzle.