CSS3 - odc. 1.5

Na temat CSS3 można mówić wiele. W tym odcinku trochę notatek z całkiem niezłej prezentacji CSS3 Takes on the World. Najbardziej sympatyczny jest automat gry losowej, który po zatrzymaniu pokazuje trzy takie same obrazki. Najzabawniejsze jest to jego cała implementacja to w całości CSS. Stosując jQuery można się obecnie zastanawiać, czy pewnych rzeczy nie dałoby się zrobić prościej … bez niego, aczkolwiek to zagadnienie nie jest ani czarne, ani białe, jest po prostu szare - jQuery też wykorzystuje CSS3, można też z jego poziomu korzystać z CSS3.

CSS Sprites

a {
     background-image: url("my-sprite.png");
     background-position: 0 0;
}

a:hover {
     background-position:0 -30px;
}

Selektory

<ul class="menu">
     <li><a href="/a/">Menu</a>
          <ul>
               <li><a href="/a/a">Sub-menu A</a></li>
               <li><a href="/a/b">Sub-menu A</a></li>
               <li><a href="/a/c">Sub-menu A</a></li>
          </ul>
     </li>
</ul>

jQuery:

$('.menu > li').hover(
       function(){ $('ul', this).show(); },
       function(){ $('ul', this).hide(); }
);

CSS:

.menu > li > ul {
       display:none;
}

.menu > li:hover > ul {
       display:block;
}

Nowe pseudo-klasy

<div class="faq">
      <a href="#a1">How much wood could...?</a>    

       ...

      <div id="a1">
            The amount of wood that a woodchuck...
      </div>

</div>

jQuery i starsze CSS:

$('.faq a').click(function(){

       $(this).parent().find('.active')
       .removeClass('active');

       $(this.href).addClass('active');

});

.faq > div { display:none; }
.faq > .active { display:block; }

Nowy CSS:

.faq > div {
     display:none;
}

.faq > div:target { 
     display:block;
}

Walidacja

jQuery plugin:  $(“#myform”).validate();

HTML5:

<input id="postcode" name="postcode" type="number" min="1001" max="8000" maxlength="4" required>

CSS3:

• :valid
• :invalid
• :required
• :optional
• :in-range
• :out-of-range
• :read-only
• :read-write

<label for="email">Email *</label>

<input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required />

<p class="val">

<span class="invalid">Please enter a valid email address e.g. ryan@example.net</span>

<span class="valid">Thank you for entering a valid email</span>

</p>

A selector of the form "E+F" matches element F when it immediately follows sibling element E in the document tree, ignoring non-element nodes (such as text nodes and comments). Element E and F must share the same parent and E must immediately precede F.

input:focus + .val { display: block; }

Tranzycje

jQuery:

$('#nav a')

      .css( {backgroundPosition: "0 0"} )

      .mouseover(function(){

          $(this).stop().animate(

                 {backgroundPosition:"(0 -250px)"},

                 {duration:500})

       })

       .mouseout(function(){

           $(this).stop().animate(

                  {backgroundPosition:"(0 0)"},

                  {duration:500})

        })

Tranzycje CSS:

-webkit-transition-property: opacity;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;

// -moz, -o, -ms

/* Skrót */
-webkit-transition: opacity 0.3s ease;

/* Wiele properties */
-webkit-transition: opacity 0.3s ease,
width 0.3s linear;

/* Wszystkie properties */
-webkit-transition: all 0.3s ease;

a {
    background:url("sprite.png");
    background-position:0 0;
    -webkit-transition:background-position .5s;
}

a:hover {
     background-position:0 -100px;
}

Animacje

@-webkit-keyframes throb {    //throb - nasza nazwa dla animacji

       0% { opacity: 0.2; left:0; }

       50% { opacity: 1.0; left:10px; }

       100% { opacity: 0.2; left:0; }

}

.faq > div {
       display:none
}

.faq > div:target {
       display:block;
       position:relative;
       -webkit-animation: throb 1.5s infinite;  //nazwa animacji, czas wykonania, ilość powtórzeń
}

@-webkit-keyframes spin {

        0% { background-position:0 0; }

        100% { background-position:0 -200px; }

}

#slotmachine { 
        background:url("spinner.png");
        background-position: 0 0;
        padding-left:20px;
        -webkit-animation: spin 2s infinite linear;
}

#slotmachine:target {
        background-position:0 -60px;
        -webkit-animation: none;
        -webkit-transition: background-position 1s;
}

Plugin jQuery dla animacji CSS:

/* http://bit.ly/cX8Xqf */

$("p").animateWithCSS(

        {border: "5px solid #555"}, // CSS properties to animate

         1000, // Duration in ms

         "cubic-bezier", // The timing function

          function(){ // Callback

               $("p").animateWithCSS({border: "0px"}, 350);

           }

);

Inny plugin jQuery z animacjami:

/* http://bit.ly/cnCYP2

left : using translate(x, y) or translate3d(x, y, z)

top : using translate(x, y) or translate3d(x, y, z)

opacity

width

height */

$('#my-el').animate({left: "+=200px", width:320 }, 1500);

Layout

display:table

<div id="content">

     <div class="sidebar">Sidebar Content</div>

     <div class="main">Main Content</div>

</div>

#content { display:table; }

.sidebar { display:table-cell; width:50px; }

.main { display:table-cell; }

Flex Box

http://www.html5rocks.com/tutorials/flexbox/quick/

#flexbox {

display: box;

box-orient: horizontal;

}

#flexbox > p:nth-child(2),

#flexbox > p:nth-child(3) {

box-flex: 1;

}

Grid Layout

#content {
        display: -ms-grid;
        -ms-grid-columns: 150px 200px;
}

.column { 
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 11;
}