search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[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.

Komentowanie jest zablokowane

Brak komentarzy