wz

Tutoriál sestavený z článků v rubrice

CSS: LI bez odrážky

02:30 26.09.2014

Když chci použít element li a nechci mít před ním odrážku, tj. když to chci mít bez dekorace v podobě kolečka / čtverečku / pořadového čísla apod, tak můžu v CSS využít vlastnost list-style-type. Tu lze nastavit na none.

Příklad:

<ul>
<li>první</li>
<li style="list-style-type:none">druhý</li>
</ul>

Výstup příkladu:

  • první
  • druhý

CSS: Generátory barevných přechodů

01:28 11.07.2013

V posledních měsících jsem při vytváření nových stránek občas využil některý z následujících nástrojů. Pomohly mi s vytvořením CSS kódu pro některé pokročilejší věci, které CSS začalo nabízet.

  • Online pomocník pro vytvoření barevného přechodu v pozadí: link, link 2
  • Online pomocník pro vytvoření stínování písma: link
  • Online pomocník pro vytvoření stínů orámování: link
  • Online pomocní pro vytváření zaoblených rohů: link

CSS: Vícenásobné použití not()

15:33 26.06.2013

:not() lze v pravidlu použit vícekrát. A to např. takto:

input:not([type=checkbox]):not(.datum){width:100%}

V tomto pravidlu jsme řekli, že všechny inputy, které nejsou typu checkbox a které nemají classu datum, tak že tyto elementy mají mít šířku 100%.

CSS: Všechny inputy kromě

15:20 26.06.2013

V CSS si lze udělat pravidlo pro všechny inputy kromě inputu určitého typu - např. pro všechny inputy kromě checkboxu (css input except checkbox). Pravidlo může vypadat takto:

input:not([type=checkbox]){  }

CSS - pootočení elementu

16:19 30.04.2013

V CSS lze rotovat elementy a jejich obsah. Např. do stylu tohoto odstavce jsem dal toto:

transform: rotate(-5deg);-ms-transform:rotate(-5deg);-webkit-transform:rotate(-5deg)

CSS: Scrollovatelná pouze výška elementu

14:15 21.12.2012

Mám-li např. div, do kterého se kvůli jeho výšce a šířce nevejde obsah, tak pomocí CSS overflow lze zařídit, aby se kolem takového obsahu zobrazovaly scrollbary.

Když bychom chtěli, aby se zobrazoval pouze scrollbar na výšku a i šířky jsme ho nechtěli, tak to lze provést takto:

overflow: auto;
overflow-x: hidden;
-ms-overflow-x: hidden

Podobný článek najdeš např. zde.

CSS: Clear

16:06 17.11.2012

  • CSS vlastnost clear souvisí s obtékáním prvků (to lze ovlivňovat pomocí float)
  • Možné hodnoty: none, both, left, right
  • Obtékací prvky mohou být různě dlouhé, tj. např. pravý sloupec bude mnohem delší než levý sloupec
  • clear:both - prvek s takovým nastavením se zobrazí až za všemi prvky, které se nad ním plovou a obtékají se
  • clear:left - prvek se vykreslí určitě až pod plovoucími prvky, které jsou přiřazeny doleva
  • více např. zde; o obtékání na stejném webu pak pojednává toto

CSS: Float

13:55 17.11.2012

  • vlastnost float se používá pro specifikaci obtékání prvku
  • možné hodnoty: left, right, none
  • none je výchozí hodnota
  • prvek, který má být obtékaný, má nastavenu i šířku, aby nebyl roztáhnut na celou šířku vnějšího prvku (monitoru)
  • když např. u elementu nadefinuji float right, tak bude napravo od obsahu, který ho obtéká

Příklad:

Tento div má v CSS předpisu následující:
background:white;
border:1px solid #c0c0c0;
float:right;
margin:10px;
padding:10px;
color:#444;
width:300px
Tento div je v HTML až za bílým divem a v CSS má:
width:200px;
margin:10px;
border:1px solid red;
padding:10px;
background:#ddd;
color:#333;
float:left

Tento text je až za oběma divy

CSS: Kulaté rohy

13:14 17.11.2012

Tento blok má kulaté rohy díky tomu, že jsem pro něj v CSS použil následující (majitelé starších prohlížečů kulaté rohy možná neuvidí ;) ):

 -webkit-border-top-left-radius:15px;
 -webkit-border-top-right-radius:15px;
 -webkit-border-bottom-left-radius:15px;
 -webkit-border-bottom-right-radius:15px;
 
 -khtml-border-radius-topleft:15px;
 -khtml-border-radius-topright:15px;
 -khtml-border-radius-bottomleft:15px;
 -khtml-border-radius-bottomright:15px;
 
 -moz-border-radius-topleft:15px;
 -moz-border-radius-topright:15px;
 -moz-border-radius-bottomleft:15px;
 -moz-border-radius-bottomright:15px;

 border-top-left-radius: 15px;
 border-top-right-radius: 15px;
 border-bottom-right-radius: 15px;
 border-bottom-left-radius: 15px;

Více ve specifikaci, která je zde.

CSS: Barevné přechody v pozadí

21:04 07.11.2012

A mám tu kratičkou zmínku k novince v CSS 3, jejímiž klíčovými slovy jsou: pozadí, gradient, barevné přechody. V CSS si lze totiž nově vytvořit pozadí, které bude např. v levém horním rohu červené, v pravém dolním rohu zelené a mezitím bude pozvolný barevný přechod.

V CSS tohoto dosáhneme pomocí linear-gradient.

Začal jsem si trochu se vším hrát a našel jsem generátor, který mi vše usnadnil. Generátor je zde. Barvy si tu naklikávám, vizuálně vidím výsledek a nabízí to i výsledný CSS kód.