[CSS] Kilka ciekawych sposobów wykorzystania CSS na stronie
This post is 17 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
W tym blogu było kilka artykułów na temat sposobów użycia CSS na swoich stronach. Teraz czas na kolejną porcję ciekawych pomysłów na strony WWW.
-
Inline-block działający we wszystkich przeglądarkach
Demo z tego przykładu znajduje się tutaj: Inline-block we wszystkich przeglądarkach
Example 1HTML <style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; margin: 5px; zoom: 1; *display: inline; _height: 250px; } .obrazek { text-align: center; } img { width: 150px; height: auto; margin: auto; } </style> <ul> <li> <div class="obrazek"> <h4>Nowe logo</h4> <img src="nowe-logo.jpg" alt="Logo" width="190"/> <p>Jakiś tekst</p> </div> </li> <li> <!--tworzymy kolejne obrazki do galerii, podobnie jak w pierwszym przypadku--> </li> </ul> -
Blokada zmiany rozmiarów textarea w Safari
Example 2CSS textarea { resize: none; }
-
Ustawienie minimalnej wysokości dla wszystkich przeglądarek
Example 3CSS .strona { min-height:500px; height:auto !important; height:500px; }
-
Ramka wokół obrazka po najechaniu kursorem
Demo z tego przykładu znajduje się tutaj: Ramka po najeździe kursorem na obrazek
Example 4CSS #zestaw1 a img, #zestaw1 a { border: none; overflow: hidden; float: left; } #zestaw1 a:hover { border: 3px solid black; } #zestaw1 a:hover img { margin: -3px; }
-
Przezroczystość w przeglądarkach
Example 5CSS .przezrocze { filter: alpha(opacity=50); /działa w IE*/ -moz-opacity: 0.5; /*stare wersje FF*/ -khtml-opacity: 0.5; /*stare wersje Safari*/ opacity: 0.5; /*działa w FF, Operze, Safari*/ }
-
Niestandardowy kolor zaznaczania tekstu na stronie
Niestety, IE nie obsługuje tego tricku 🙁
Example 6CSS ::selection { background: #ffb7b7; } ::-moz-selection { background: #ffb7b7; }
Mam nadzieję, że te kilka przykładów się przyda w tworzeniu swojej własnej niepowtarzalnej strony WWW.
About the author
