Twoje strony internetowe

Popraw dowolny element na Twojej stronie

Zaokrąglone rogi bez używania obrazków

Najprtostrze zaokrąglanie rogów bez:

  • java sriptu
  • jquery
  • obrazków

Aby uzyskać efekt zaokrąglonych rogów w danym elemencie strony, nie używając obrazków, można wykorzystać poniższy kod CSS:

.rog1, .rog2, .rog3, .rog4, .rog22, .rog32, .rog42{font-size:1px; overflow:hidden;
 display:block;}
.rog1 {height:1px; background:#aaa; margin:0 5px;}
.rog2, .rog22 {height:1px; background:#aaa; border-right:2px solid #aaa; 
border-left:2px solid #aaa; margin:0 3px;}
.rog3, .rog32 {height:1px; background:#aaa; border-right:1px solid #aaa;
 border-left:1px solid #aaa; margin:0 2px;}
.rog4, .rog42 {height:2px; background:#aaa; border-right:1px solid #aaa; 
border-left:1px solid #aaa; margin:0 1px;}
.rog22, .rog32, .rog42 {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background:#ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

A następnie kodowanie w pliku HTML dla danego elementu:

<b class="rog1"></b><b class="rog2"></b><b class="rog3"></b><b class="rog4"></b>
<div class="headh">
<h3>Tekst na górze</h3>
</div>
<div class="contenth">
<div>Tekst na dole</div>
</div><b class="rog42"></b><b class="rog32"></b><b class="rog22"></b><b class="rog1">
</b>

Tutaj znajduje się demo z tego artykułu: ZAOKRAGLONE ROGI – DEMO

A tutaj po małych przeróbkach.

większość pochodzi z artykułu:
[CSS] Zaokrąglone rogi bez używania obrazków | Piotr Nalepa – Blog webmasterski | Porady i tutoriale CSS, jQuery, PHP.

posted by admin in Dodatki and have Comment (1)

One comment

  1. Komentarz by Grady Newmeyer on 30 września 2015 at 14:23

    You can definitely see your skills in the paintings you write. The world hopes for more passionate writers like you who aren’t afraid to say how they believe. All the time follow your heart.

You must be logged in to post a comment.