chevron-left chevron-right

[CSS] Kilka ciekawych sposobów wykorzystania CSS na stronie

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.

  1. Inline-block działający we wszystkich przeglądarkach 
        <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>
    Demo z tego przykładu znajduje się tutaj: Inline-block we wszystkich przeglądarkach
  2. Blokada zmiany rozmiarów textarea w Safari 
        textarea {
      resize: none;
	}
  3. Ustawienie minimalnej wysokości dla wszystkich przeglądarek 
        .strona {
  		min-height:500px;
  		height:auto !important;
  		height:500px;
	}
  4. Ramka wokół obrazka po najechaniu kursorem 
        #zestaw1 a img, #zestaw1 a { 
		border: none; 
		overflow: hidden; 
		float: left; 
	}
	#zestaw1 a:hover { 
		border: 3px solid black; 
	}
	#zestaw1 a:hover img { 
		margin: -3px; 
	}
    Demo z tego przykładu znajduje się tutaj: Ramka po najeździe kursorem na obrazek
  5. Przezroczystość w przeglądarkach 
        .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*/
	}
  6. Niestandardowy kolor zaznaczania tekstu na stronie 
        ::selection {
    	background: #ffb7b7;
	}
	::-moz-selection {
    	background: #ffb7b7;
	}
    Niestety, IE nie obsługuje tego tricku 🙁

Mam nadzieję, że te kilka przykładów się przyda w tworzeniu swojej własnej niepowtarzalnej strony WWW.