31 maja 2016

CSS Transitions, czyli efekty przejścia w CSS



Witam! Dziś coś bardziej skomplikowanego (bądź nie) a mianowicie przejścia w CSS. O co chodzi z tymi przejściami? Przejścia mogą nam bardzo urozmaicić i upiększyć transformację tekstu, menu czy czegokolwiek. Jak to wygląda w praktyce można zobaczyć TU.

Wysuwane górne menu


Dziś instrukcja na wysuwane menu przewijające się razem ze stroną.

1. Wchodzimy w kod HTML i szukamy <header> zaraz pod nim wklejamy kod:

<style>
/* Some stylesheet reset */
.fin, .fin ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}
/* Wygląd główny */
.fin {
    /* Marginesy i obramowanie */
    display: block;
margin-left: 0;
    position: fixed; top center; z-index: 999999;
    height: 45px;     /* wysokość */
    width: 100%; /* Zmień to, jeśli chcesz, żeby menu było szersze lub usuń całkowicie, jeśli chcesz, aby długość menu przybrała wartość &quot;domyślną&quot; (żeby menu było tak długie, jak pozwala na to zawartość */
    border-radius: 0px;     /* Wpisz większą wartość, jeżeli chcesz mieć zaokrąglone rogi */
    border: none;     /* kolor i grubość zwykłego obramowania */
    /* Tło oraz efekty podświetlenia linku */
    background: #ccc; /* Tło odczytywane w przeglądarkach IE9 oraz starszych */
    background: -webkit-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Chrome i Safari */
    background: -moz-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Firefoxa */
    background: -o-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Opery */
    background: -ms-linear-gradient(bottom, #ccc, #ccc); /* Tło dla IE10 */
    box-shadow: inset 0 0px 0 ;     /* Cień menu */
}
.fin&gt;li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 1px 0 0;
}
/* Główne linki */
.fin&gt;li&gt;a {
    /* Layout */
    display: block;
    padding: 13px 29px;
    /* Styl napisów */
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    text-shadow: none;
    /* Efekty */
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
/* Stan linków głównych po najechaniu na nie kursorem */
.fin&gt;li&gt;a:hover, .fin&gt;li:hover&gt;a {
    background: #000;  
    background: rgba(255, 255, 255, .6);
    color: #000;
    text-shadow: 2px 2px 2px #ffd800;

}
.fin&gt;li:first-child&gt;a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.fin&gt;.dropdown&gt;a {
    padding-right: 26px;
}


.fin ul {
    position: relative;
    position: absolute;
    left: -9999px;
    display: block;
    box-shadow: 0 0px 0px rgba(0, 0, 0, .1);
}
/* Level 1 podmenu */
.fin&gt;li&gt;ul {
    padding-top: 0px;
    z-index: 99;
    border-top: 1px solid #fff;
    top: 34px;
}
/* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
.fin&gt;li:hover&gt;ul {
    left: -1px;
}
/* Level 2+ podmenu */
.fin ul ul {
    left: -9999px;
    top: 0px;
    z-index: 999;
}
/* Sprawianie, że lvl 2+ menu wysuną się po najechaniu kursorem */
.fin ul&gt;li:hover&gt;ul {
    left: 120px;
    top: 1px;
}
/* Zawartość linków z podmenu */
.fin ul li {
    position: relative;
    display: block;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    /* Tworzenie efektu wysunięcia. Lista elementów, która się wysunie, ma 0 wysokości. Pojawi się dopiero wtedy, kiedy najedziemy kursorem w odpowiednie miejsce */
    height: 0px;
    -webkit-transition: height .4s;     /* Szybkość wysunięcia dla poszczególnych przeglądarek */
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
}
/* Wysunięta lista linków */
.fin li:hover&gt;ul&gt;li {
    height: 35px;
}
.fin ul li:hover&gt;ul&gt;li:first-child {
    height: 35px;
}
/* Linki podmenu */
.fin ul li a {
    /* Styl */
    display: block;
    width: 200px;     /* Jeśli w podmenu napiszemy zbyt długi wyraz i nam go ucina, zwiększamy wartość szerokości */
    padding: 10px;     /* Odstęp od brzegów wysuniętej listy - od wszystkich krawędzi: prawej, lewej, górnej, dolnej */
    border-bottom: none;
    /* Styl napisów */
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 1px #ffd800;
    font-family:  Arial, sans-serif;
    text-decoration: none;

    /* Efekty tła */
    background: #000;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -ms-transition: background .4s;
    -o-transition: background .4s;
    transition: background .4s;
}
/* Stan napisów, kiedy najedziemy kursorem na linki */
.fin ul li&gt;a:hover, .fin ul li:hover&gt;a {
    background: #e9e9e9;
    color: #000; font-weight: 600;
}
.fin ul ul&gt;li:first-child&gt;a {
    border-top: 1px solid #fff;
}
.fin ul&gt;li:last-child&gt;a {
    border-bottom: 1px solid #fff;
}


.fin ul&gt;.dropdown:hover&gt;a::after, .fin ul&gt;.dropdown&gt;a:hover::after {
    border-color: #fff;
}
</style>
<ul class='fin'>
  <li><a href='#'>Strona główna</a></li>
    <li><a href='#'>Nazwa strony</a>
    <ul>
        <li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
        <li><a href='#'>Nazwa podstrony III</a></li>
        <li><a href='#'>Nazwa podstrony IV</a></li>
        <li><a href='#'>Nazwa podstrony V</a></li>

         
      </ul></li>
    <li><a href='#'>Nazwa strony II</a><ul>
<li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
      </ul></li>
    <li><a href='#'>Nazwa strony III</a>
<ul>
        <li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
<li><a href='#'>Nazwa podstrony III</a>
   

            </li>
      </ul></li>
<li><a href='#'>Nazwa strony IV</a></li>
<li><a href='#'>Nazwa strony V</a></li>
<li><a href='#'>Nazwa strony VI</a></li>
<li><a href='#'>Nazwa strony VII</a></li>
<li><a href='#'>Nazwa strony VIII</a></li>
    </ul>
2. Zmieniamy wszystko według własnego uznania i zapisujemy.

źródło: introwertyczka1

Menu nad nagłówkiem - nie jako strony


Witaj! Dzisiaj wstawię bardzo przydatną instrukcję, jak zrobić Menu nad nagłówkiem ale nie dodając go jako gadżet. W ten sposób możecie, zrobić dwa menu. Jeden jako strony np. pod nagłówkiem a drugi nad. A więc do dzieła!

1. W kodzie HTML szukamy "<header>" i pod podem wklejamy ten kod:

<style> @charset &#39;UTF-8&#39;; #menup, #menup ul, #menup li #menup a { list-style: none; margin: 0; padding: 0; border: 0; font-size: 13px; font-family: Arial; line-height: 1px; } #menup { width: 1500px; } #menup ul { background: transparent; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: none; } #menup ul:before { content: &#39;&#39;; display: block; } #menup ul:after { content: &#39;&#39;; display: table; clear: both; } #menup a, #menup a:link, #menup a:visited { padding: 10px 5px; display: block; text-decoration: none; color: #ffc0c1; font-weight: bold; } #menup a:hover { color: #ed8d94; } #menup li { float: left; } #menup li:hover { color: #ed8d94; } #menup li:first-child { padding-left: 150px; }</style>
<div id='menup'>
<ul>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
<li><a href='LINK'><span>Nazwa strony</span></a></li>
</ul>
</div>
2. Zmieniamy Nazwy stron an własne a zamiast napisu "LINK" wklejamy link, do którego ma nas przekierowywać strona.
3. Zapisujemy i cieszymy się menu nad nagłówkiem.

źródło: introwertyczka1

Cytaty w poście - wygląd


Jak ładnie urozmaicić cytaty w poście? Jest na to kilka prostych przykładów. Oto kilka z nich:

KOD:
blockquote {
font-size: 12px;
margin-bottom: 20px;
line-height: 1.65em;
font-weight: 300;
padding: 20px 20px 20px 50px;
color: #fff;
border-top: 5px solid #C04040;
background: #000000 url(http://2.bp.blogspot.com/-efI8eumd0Ow/UdJQYLiab9I/AAAAAAAACP4/ePmgr9wVJew/s16/icon_blockquote.png) no-repeat 20px 25px;
}
blockquote p {
margin: 0;
}
EFEKT:
KOD:
blockquote {
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size: 20px;
padding:12px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;}
EFEKT:
KOD:
.post blockquote {
  padding:20px;border-left:10px solid #ddd;background:url(http://4.bp.blogspot.com/-I7XvY5FUhYA/U7-Hp1S1ucI/AAAAAAAAB3Y/vE-VP7oCza0/s1600/szare+zygzaki50.png);}
EFEKT:
EFEKT:

KOD:
blockquote {
border:1px solid #000;
position:relative;
font-size:90%;
padding:20px;
}
blockquote:before {
 top:0;
left:0;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 30px solid #000;
  border-bottom: 30px solid transparent;
}
blockquote:after {
  position:absolute;
  right:0;
  bottom:0;
  content: "";
  width: 0;
  height: 0;
  border-right: 30px solid #000;
  border-top: 30px solid transparent;
  font-size: 0;
}
KOD:
blockquote {
margin:20px 0;
padding:10px 50px;
background-color:#000;
color:#fff;
position:relative;}
blockquote:after{
  bottom:0;
  content: "";
  position: absolute;
  right: 30px;
width: 0;
height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent; border-bottom: 17px solid #fff;}

źródła: domowe-metody, pasjekaroliny.pl, Agata

"Moja lista blogów" pod lupą


Dzisiaj nie częsty przypadek a mianowicie gadżety "Moja lista blogów" poszperałam i znalazłam selektory, które nieco urozmaicą naszą listę :)

.title - tytuł gadżetu, w tym wypadku: "Moja lista Blogów"
.blog-list-container - cały gadżet bez tytułu. 
.blog-icon - ikona bloga, to takie białe "B", na pomarańczowym tle.
.blog-content - każdy blog oddzielnie bez ikony.
.blog-title - tytuł bloga np: "Szablon to odzwierciedlenie duszy.".
#BlogList1 .item-content - każdy blog od dzielnie, bez ikony i tytułu bloga.
#BlogList1 .item-thumbnail - miniatura grafiki w szablonie. 
#BlogList1 .item-title - tytuł posta bloga.
#BlogList1 .show-option -  selektor odpowiadający za "Pokaż wszystko". 
#BlogList1 .item-snippet - treść posta.
#BlogList1 .item-time - data publikacji

5 maja 2016

Urozmaićmy POPULARNE POSTY!

Dzień dobry! W tak piękny słoneczny dzień przekazuje świetną instrukcję, a właściwie gotowe kody na popularne posty. Autorką jednego z kodów jest TYLER.

Efekt jest następujący:

Kod:
.popular-posts ul{list-style:none;}
.popular-posts ul li {margin-left:-13px;margin-bottom:-5px;}
.item-title {border-left:10px #F35E5E solid;font-family:arial; background-color: #666; text-transform: uppercase; padding: 5px; z-index: 0; color: #EEF3DA; font-size: 8px; line-height: 100%; letter-spacing: 1px;filter: alpha (opacity=900); -moz-opacity: 0.90; opacity: 0.90; height:10px;margin-bottom:0px;}
.item-title a { color:#eee;}
.item-snippet { text-align:justify;background:#EEF3DA;padding:5px;}

Efekt: 
Kod:
.PopularPosts .item-title {
    text-transform: uppercase;
    font-size: 85%;
    border-bottom:1px dotted $(motyw1);
    margin-bottom:2px;
}
Efekt:

Instrukcja:
1. Wyszukujemy </body> i nad nim wklejamy:
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>
2. Kod CSS, który dodajemy w arkuszu:
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }
Efekt:

Instrukcja:
1. Nad </body> wklejamy:
 <script type='text/javascript'>
        //<![CDATA[
        $(document).ready(function() {
          $('.mobile-index-thumbnail img').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});
          $('.mobile .post-body img').attr('src', function(i, src) {return src.replace( 's280', 's500' );});
          $('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});
          $('.post-body').fitVids();
          $('.post-body img').each(function(){
            $(this).removeAttr('width')
            $(this).removeAttr('height');
          });
        });
        //]]>
 </script>
2. W arkuszu wklejamy:
.widget .popular-posts ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.PopularPosts .item-thumbnail {
    float: none;
    margin: 0;
}
.PopularPosts .item-title {
    font: 12px Arial, sans-serif; /* Wielkość i rodzaj fontu tytułu */
    letter-spacing: 1px; /* Wartość odstępów między literami tytułu */
    padding-bottom: 0.2em; /* Wartość odstępu pod tytułem */
    text-transform: uppercase; /* Wielkie litery tytułu */
    text-align: center; /* Wyśrodkowanie tytułu */
}
.PopularPosts .item-title a {
    color: #222; /* Kolor tytułu linku */
}
.PopularPosts img {
    width: 100%; /* Szerokość zdjęcia */
    height: auto; /* Wysokość zdjęcia */
    transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}
.PopularPosts img:hover {
    opacity: .7; /* Stopień przezroczystości zdjęcia po najechaniu myszą */
}
.PopularPosts .item-snippet {
    display: none; /* Brak wyświetlania fragmentu tekstu */
}
(c) graphical-thoughts, blokotek