Jak na stránky umístit responzivní video

Je mnoho způsobů jak na stránky vkládat videa z Youtube, Vimeo apod. Mně se nejvíce osvědčil způsob, který jsem našel zde. Jednoduché, elegantní a samozřejmě responzivní řešení.

CSS kód

Samotný CSS kód, který k umístění videa na stránky použijeme, vypadá tedy takto:

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px;
    overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML kód

Kód, který pak vložíme do stránek, se již dá jednoduše odvodit:

<div class="responsive-video">
<iframe src="https://www.youtube.com/embed/XXXX"></iframe>
</div>

Publikováno 17.10.2017 v 02:26 | Kategorie: CSS

Horizontální i vertikální vycentrování v CSS

Určitě jste si někdy lámali hlavu s tím jak na stránkách vycentrovat nějaký prvek a to nejen horizontálně ale i vertikálně a ještě navíc aby to fungovalo ve všech webových prohlížečích. Skvělé a hlavně funkční řešení pomocí flexboxu jsem nalezl na těchto stránkách.

Samotný CSS kód

Vše obstará níže uvedený CSS kód:

html {
   height: 100%;
}

body {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

   margin: 0;
   height: 100%;
   width: 100% /* needed for Firefox */
}

Jak to vypadá v praxi můžete vidět např. na mé profilové stránkce zde.

Publikováno 3.2.2015 v 15:22 | Kategorie: CSS

Jak pomocí CSS očíslovat položky v tabulce

Při vytváření tabulky v HTML se může občas hodit přidat automatické číslování řádků. Docílit toho lze jednoduše i bez použití JavaScriptu – jen v CSS.

Očíslování s vynecháním nadpisu

Nejdříve si ukážeme variantu, kdy je v tabulce použit nadpis (<th>), který do číslování samozřejmě zahrnovat nebudeme. CSS kód by v tomto případě vypadal takto:

table tr:not(:first-child) {
    counter-increment: rowNumber;
}

table tr:not(:first-child) td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Očíslování bez nadpisu

Pokud v tabulce nadpis nepoužíváme, kód můžeme změnit na:

table {
    counter-reset: rowNumber;
}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Publikováno 29.1.2015 v 15:04 | Kategorie: CSS