sobota 22. října 2016


Pro dnešek jsem se rozhodla probrat takovou základní věc a to seznamy. Možností, jak si změnit odrážky je hned několik. Od základních až po složitější a propracovanější. Takže se pustíme do toho a doufám, že se někomu bude tento návod líbit :-)

Můj návod.

Kopírovat se zdrojem! 


Následující kódy vkládáte do css, tedy nad ] ] ></b:skin>

Typy odrážek - nečíselné

Jednou z možností je mít místo odrážek obrázky. Stačí si nějaký najít nebo vytvořit (doporučuji velikost okolo 16 x 16 px). Do šablony v css vložíte kód níže a místo tučného vložíte adresu k uloženému obrázku. A pak můžete mít odrážky například jako já na obrázku, které používám na blogu...

margin-left ... určuje vzdálenost odrážky od okraje stránky

.post ul li {list-style-image: url('adresa obrázku'); margin-left: 30px;}

Pokud chcete mít odrážky klasické, zvolíte si typ disc...
.post ul li {list-style-type: disc; margin-left: 30px;}


Jiným typem odrážky je toto kolečko...
.post ul li {list-style-type: circle; margin-left: 30px;}


V další variantě lze použít čtvereček...
.post ul li {list-style-type: square; margin-left: 30px;}



Číselné odrážky


Klasický číselný seznam...
.post ol li {list-style-type: decimal; margin-left: 30px;}


Malá římská čísla...
.post ol li {list-style-type: lower-roman; margin-left: 30px;}


Velká římská čísla
.post ol li {list-style-type: upper-roman; margin-left: 30px;}


Malá písmena...
.post ol li {list-style-type: lower-alpha; margin-left: 30px;}

Velká písmena...
.post ol li {list-style-type: upper-alpha; margin-left: 30px;}


Speciální odrážky - číselné

.post ol li
{
list-style-type: none;
padding-left: 30px;
margin-left: 60px;
margin-right: 60px;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: left;
border-radius: 2em;
}


padding-left: 30px; - vzdálenost textu od okraje
margin-left: 60px; margin-right: 60px; - vzdálenost okraje barevného pozadí z levé a pravé strany. V podstatě tím určujete šířku odrážky s pozadím...
color: #fff; - barva textu
background: #ee778e; - barva pozadí


.post ol li
{
list-style-type: none;
padding-left: 30px;
margin-left: 60px;
margin-right: 60px;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: left;
}


Čtvereček se šipkou...
.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 4.5em;
}
.post ol li:before{
color: #fff;
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -1em;
background: #ee778e;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #ee778e;
}

background: #ee778e; - barva pozadí
border-left:8px solid #ee778e; - barva malého trojúhelníčku, co tvoří šipku

Čísla v kolečku...
.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}


I čtvereček má své kouzlo...
.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
transition: all .3s ease-out;
}

background: #ee778e; - barva čtverce


Odrážka jako kolečko se šipkou...
.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff;
background: #ee778e;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.post ol li:after{
position: absolute;
content: '';
left: 35px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #ee778e;
}

background: #ee778e; - barva pozadí
border-left:8px solid #ee778e;  - barva šipky


Čísla jsem jen oddělila malou šipkou...
.post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.post ol li:after{
position: absolute;
content: '';
left: 35px;
margin-top: -.5em; 
top: 50%;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left:6px solid #ee778e;
}

border-left:6px solid #ee778e;   - barva šipky

Na této stránce si můžete vybrat jakýkoli jiný symbol a vložíte jeho číslo za obrácené lomítko, nebo můžete vložit i text....
post ol{
counter-reset: li;
list-style-type: decimal;
padding: 0;
margin-bottom: 4em;
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
margin: .5em 0;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
.post ol li:after{
position: absolute;
content: '\26af';
left: 35px;
}



Našla jsem tuto velice pěknou verzi číselných seznamů. V tomto případě je šířka přes celou stránku.
.post ol{
counter-reset:li;
list-style-type: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ee778e;
background:#FBD9DF;
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#ee778e;
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #ee778e;
}

border-bottom:1px solid #ee778e; - barva spodní linky, takové podtržení
background:#FBD9DF; - pozadí textu
background:#ee778e; - pozadí čtverečku s číslem
border-color: transparent transparent transparent #ee778e; - barva malého trojúhelníku, který dodavá pocit, že je pozadí čísla lehce prostorové

Stejná verze jako výše, ale doplněná o styl, kdy je seznam od obou stran posunut, takže je kratší...
.post ol{
counter-reset:li;
list-style-type: decimal;
margin-left:0;
padding-left:80px;
padding-right:80px;

}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ee778e;
background:#FBD9DF;
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#ee778e;
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #ee778e;
}

padding-left:80px; - odsazení zleva
padding-right:80px;
- odsazení zprava


Stejné jako předchozí, tentokrát místo čtverců kolečka...
.post ol{
counter-reset:li;
list-style-type: decimal;
margin-left:0;
padding-left:80px;
padding-right:80px;
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
background:#FBD9DF;
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#fff;
text-align:left;
background:#ee778e;
text-indent:6px;
border-radius: 2em;
}



To je pro dnešek vše. Pokud mě napadne nějaká zajímavá varianta, určitě ji doplním. Pokud sami máte návrh, sem s ním :-) Některé odrážky jsou moje pokusy, kdy jsem testovala možnosti, některé jsou inspirované typy na této stránce...



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

0 komentářů:

Okomentovat


  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...