Ciekawe przykłady wykorzystania ramek na stronie

Ramki są bardzo często wykorzystywanym elementem na stronach interentowych. Właściwe ich zastosowanie nie jest sprawą prostą i wymaga trochę wysiłku. Poniżej zaprezentuje kilka przykładów ciekawego zastosowania ramek na stronie.

Ramka nagłówka

Poniżej zamieszczam kilka moim zdaniem ciekawego wykorzystania ramek do nagłówka.

Zastosowanie ramek na stronie www

border-bottom:2px solid #DD0055;

Zastosowanie ramek na stronie www

border-left:4px solid #DD0055;
padding-left:5px;

Zastosowanie ramek na stronie www

position: relative;

oraz dla parametru head3:before

content: ""; 
position: absolute; 
bottom: -3px; 
left: -5px;
top: -3px; 
width: 3px; 
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#DD0055), to(transparent)); background-image: -webkit-linear-gradient(transparent, #DD0055); 
background-image: -moz-linear-gradient(transparent, #DD0055); 
background-image: -o-linear-gradient(transparent, #DD0055);

dla paramteru head:after

content: ""; 
position: absolute; 
bottom: -3px; 
left: -5px;
right: -3px; 
height: 3px; 
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#DD0055), to(transparent)); background-image: -webkit-linear-gradient(left, #DD0055, transparent); 
background-image: -moz-linear-gradient(left, #DD0055, transparent); 
background-image: -o-linear-gradient(left, #DD0055, transparent);

Zastosowanie ramek na stronie www

Dla parametru head4:after

background-color: #DD0055;
bottom: 0;
content: "";
display: block;
height: 3px;
margin-bottom: -1px;
margin-top: 1px;
width: 50px;

Zastosowanie ramek na stronie www

dla parametru .head5:first-letter

background: none repeat scroll 0 0 #DD0055;
border: 1px solid #DD0055;
color: #FFFFFF;
padding: 2px 5px;

Formularz

Formularz ma swoje zastosowanie na praktycznie każdej stronie internetowej, głównie w zakładce kontaktu, ale nie tylko. W bardzo łatwy sposób, przy użyciu funkcji border można nieco podrasować nasz formularz.

Dla pól typu input:

border:none;
font-size: 17px;
border-bottom:3px solid #DD0055;
padding: 7px 0 7px 2px;

Dla pola textarea:

border-top:1px solid #f0f0f0;
border-left:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
font-size: 17px;
border-bottom:3px solid #DD0055;
padding: 7px 0 7px 2px;

Jak widać wyżej można w różny sposób wykorzystywać ramki. Powyżej są one zastosowane jedynie w dwóch przypadkach, jednak każdą z tych opcji można w łatwy spoób przenieść na inne elementy naszej strony.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code