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

Změna pořadí bloků pomocí CSS

Změna pořadí bloků/elementů vertikálně pomocí pouze CSS: #container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* nepovinné*/ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } #div2 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; Čí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 gradient background

Gradientní pozadí (bacground) fungující i v IE8 CSS: .gradient{ background: #c20005; background: -webkit-gradient(linear, left top, left bottom, from(#c20005), to(#9d0c0d)); background: -moz-linear-gradient(top, #c20005, #9d0c0d); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c20005', endColorstr='#9d0c0d');} Ukázka: GRADIENT background

Od admin, před
Vyřešené problémy

Background fit in ie8 fix

Neroztahuje se Vám obrázek pomocí CSS3 background-size v ie8? Lehká náprava v CSS stylech… CSS: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../backgroundpath.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../backgroundpath.jpg', sizingMethod='scale')";

Od admin, před