Poznámky

Bootstrap carousel fade effect

Fading effect u Bootstrap Carouselu Přidat hlavnímu divu Carouselu class „carousel-fade“ CSS: .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: Číst více…

Od admin, před
Poznámky

CSS hacky pro IE

Pokud potřebujeme CSS jen pro různé verze IE CSS: #hack{ color:red; /* všechny prohlížeče */ color:red !important; /* všechny prohlížeče kromě IE6 */ _color:red; /* pracuje jen v IE6 */ *color:red; /* IE6, IE7 */ +color:red; /* pracuje jen v IE7*/ *+color:red; /* pracuje jen v IE7 */ color:red\9; /* Číst více…

Od admin, před
Poznámky

Jednoduchý modal vyskakovací okno

Jednoduché vyskakovací okno pomocí velmi jednoduchého jQuery scriptu HTML: <div class="window">         <div class="box">         <div id="zavrit-banner">X</div>         <p><strong>Vyskakovací okno</strong></p>         <p>Zavřete kliknutím na černou plochu</p>         </div> </div> Javascript/jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>         <script>         $("#zavrit-banner").click(function() {           $( ".window" ).fadeOut("slow");         Číst více…

Od admin, před
Poznámky

CSS3 only image rotator / rotátor obrázků

Rotátor obrázků s mizícím pozvolným přechodem s využitím pouze CSS3, žádné skripty. Hodí se pouze pro JPEG obrázky. Tento příklad je pro 4 obrázky, pro jiný počet je nutno trošku poupravit. HTML: <div class="rotateimages"> <img src="images/banner-3.jpg" alt="banner image"> <img src="images/banner-1.jpg" alt="banner image"> <img src="images/banner-2.jpg" alt="banner image"> <img src="images/banner-4.jpg" alt="banner image"> Číst více…

Od admin, před
Poznámky

Jednoduchá html5 animace – banner

Za pomoci jednoduchých hmtl5 prvků, CSS3 stylů a minima javascriptu můžeme udělat pěkné responzivní animace (tato animace je napůl responzivní… Jop, jsem línej…) jako je tato tragická love story: I LOVE YOU BUT I DON’TLOVE YOU 🙁 Javascript: var maxtime=13; /* pocet sekund animace */ var i=0; var timer=function(){ var Číst více…

Od admin, před
Poznámky

IE 8 inline-block fix

IE 8 špatně zobrazují display: inline-block . DIVy se chovají jako block místo inline-block. Buďto použijte float, nebo následující fix na daném prvku v CSS: display: inline-block; *zoom: 1; *display: inline;

Od admin, před
Poznámky

CSS3 ikonky – text (písmo) icomoon

http://icomoon.io/app/#/select Označit, které chci, dole zmáčknout Font, potom Download. Poté je potřebná úprava CSS stylů a HTML kódu následovně (např.): HTML: <span class="icon-home"></span> CSS: @font-face { font-family: 'icomoon'; src:url('http://www.domena.cz/cesta-ke-stazenym-fontum/icomoon.eot?saoo4g'); src:url('http://www.domena.cz/cesta-ke-stazenym-fontum/icomoon.eot?#iefixsaoo4g') format('embedded-opentype'), url('http://www.skece.cz/wp-content/uploads/2014/05/fonts/icomoon.woff?saoo4g') format('woff'), url('http://www.skece.cz/wp-content/uploads/2014/05/fonts/icomoon.ttf?saoo4g') format('truetype'), url('http://www.skece.cz/wp-content/uploads/2014/05/fonts/icomoon.svg?saoo4g#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; Číst více…

Od admin, před