Zaoblené rohy. Zaoblené rohy pomocí CSS3 hraničního poloměru

Zaoblené rohy v CSS lze provést mnoha způsoby, velmi mnoha, a některé z nich lze považovat za zastaralé, protože CSS 3 zavedlo nové vlastnosti, které vám umožňují zaoblit rohy prvků HTML. Za prvé však starší prohlížeče tyto vlastnosti nepodporují a za druhé se v kreativním mozku designéra někdy zrodí takové nápady, které dokážou zachránit jen staré metody. Proto se zde podíváme na několik různých možností pro vytváření zaoblených rohů v CSS: od nejjednodušších po poměrně složité.

V těchto příkladech jsou rohy původně blokových prvků zaoblené a v některých příkladech jsou tyto bloky použity jako pomocné prvky. Pamatujte však, že totéž můžete snadno provést s prvky na úrovni řádků a v případě potřeby je přednastavit pomocí bloku nebo vloženého bloku.

Zaoblené rohy v CSS 3 bez obrázků

Tento příklad využívá vlastnosti z CSS 3, které vám umožňují snadno zaoblovat rohy bez pomoci obrázků.

Příklad HTML a CSS: Zaoblení rohů pomocí CSS 3 bez obrázků

Popis příkladu

1. Pro zaoblení rohů používáme vlastnost CSS 3, které rozumí všechny moderní prohlížeče.
2. U starších prohlížečů Firefox, Chrome a Safari používáme speciální vlastnosti s předponami -moz- a -webkit- , které se objevovaly dříve, než byla podporována hlavní vlastnost. Bohužel neexistují žádné podobné analogy pro starou Operu a IE. Upozorňujeme, že při vytváření složitých křivek nemusí vlastnosti s předponami fungovat správně. Proto byly v kódu CSS uvedeny výše než vlastnost main, takže podle stylové priority, používaly to prohlížeče, které už rozumí "čistému".

Vlastnosti s předponami nejsou ve specifikaci CSS, takže jejich použití bude mít za následek neplatný kód.

Zaoblené rohy v CSS bez obrázků

Tento příklad také nemá obrázky, ale používá další bloky. Podstata metody spočívá v tom, že před a za hlavním obsahem je označeno několik bloků, které, jak se od něj vzdalují, postupně zmenšují šířku pomocí bočních vnějších okrajů. Díky tomu dochází k imitaci zaoblení rohů.

Tato metoda je špatná, protože kód je „zasypaný“ dalšími bloky, ale bohužel v mnoha příkladech takové bloky budou přítomny. Další nevýhodou je, že s velkými poloměry zakřivení budete muset přidat ještě více bloků, než je použito v příkladu.

Příklad HTML a CSS: Zaoblení rohů bez použití obrázků

Popis příkladu

1. Uvnitř bloku s class = "block" označujeme prvek pro hlavní obsah ("content_block"), před který umísťujeme bloky pro simulaci zaoblení rohů ("b1" , "b2" , "b3" ). Poté je položíme stejně, ale v opačném pořadí.
2. Simulační bloky nastavíme na požadovanou výšku a boční okraje (CSS), abychom vytvořili vzhled rohů. Také jsme resetovali jejich velikost písma (CSS) a nastavili ji na :hidden - to je určeno pro starší prohlížeče, které mohou zvětšit výšku a zvětšit ji, než je uvedeno.
3. V tomto příkladu byla kromě zaoblení rohů přidána také imitace rámu, pokud ji nepotřebujete, pak jednoduše odstraňte všechny „okraje“ z prvků a odstraňte barvu pozadí z „b3“; blok.

Nejjednodušší způsob, jak v CSS zobrazit zaoblené rohy, je použít obrázek jako pozadí prvku. V tomto případě jsou rozměry prvku obvykle zadány stejně jako velikost obrázku na pozadí. Nevýhodou této metody je, že obsah prvku by neměl přesahovat jeho rozsah, to znamená, že by měl mít určitou omezenou velikost.

Příklad HTML a CSS: Zaoblení rohů pomocí jednoho obrázku

Popis příkladu

1. Pomocí vlastnosti CSS nastavíme blok na obrázek na pozadí, který je zakázáno reprodukovat vertikálně a horizontálně (no-repeat), protože v tomto případě to není vyžadováno.
2. Aby se text uvnitř bloku nedotýkal jeho okrajů, nastavili jsme jeho odsazení (CSS) na 5px na každé straně.
3. Dále je potřeba nastavit blok na stejné rozměry jako pozadí. Náš obrázek na pozadí má rozměry 140x32 pixelů, ale udáváme šířku (CSS) a výšku (CSS) samotného bloku zmenšené o 10px. Musel jsem to zmenšit kvůli stejným vnitřním výplním, které také rozšiřují prvek o 5px v každém směru.

V předchozím příkladu byla velikost bloku pevná a závisela na velikosti obrázku na pozadí, což je velmi nepohodlné. Nyní změníme šířku našeho bloku. Chcete-li to provést, vystřihněte tři části obrázku - strany a kousek středu. Poté do hlavního bloku umístíme dva prvky s pevnými rozměry, které se díky absolutnímu polohování umístí na jeho boky. Dejme jim stejné boční části jako pozadí a centrální část pro hlavní blok. Získáme tak blok se zaoblenými rohy a proměnnou šířkou.

Tato technika se velmi často používá k zaokrouhlení jednořádkových prvků, jako jsou odkazy nebo názvy sekcí/menu.

Příklad HTML a CSS: Zaoblení rohů pomocí bočních bloků

Popis příkladu

1. Do třídy bloku = "blok" umístíme dva prvky - "left_bok" a "right_bok", kterým nastavíme obrázky bočních částí jako pozadí (CSS) a zakážeme jejich reprodukci (no-repeat). Pro samotný hlavní blok nastavíme pozadí z centrální části a umožníme jej duplikovat pouze horizontálně (repeat-x).
2. U bočních bloků udáváme šířku odpovídající velikosti pozadí pro nás je to 14x32 pixelů. Ale pro hlavní blok, jako v předchozím příkladu, nastavíme výšku na 22px, abychom kompenzovali vertikální výplň.
3. Naše boční stěny umístíme relativně k "bloku", takže pro něj určíme :relative a absolutní pro samotné boční stěny. No, pak je přitlačíme na odpovídající strany rodiče pomocí vlastností CSS , a .
4. Aby se obsah bloku neskrýval pod bočními obrázky, nastavili jsme „blok“ tak, aby měl boční výplň (CSS), která může být stejná nebo o něco větší než samotné strany. Nastavíme také malé okraje nahoře a dole, aby se text „nelepil“ k okrajům.

V IE6 je malá chyba s touto metodou:

Pokud je šířka nebo výška „bloku“ lichá, objeví se mezi vnitřním okrajem bloku a vpravo umístěným postranním panelem nepříjemné 1px odsazení, které celý obrázek zkazí. Tuto chybu lze opravit pomocí CSS hack s určitým výrazem, ale ani zde nebudu uvádět takový příklad, protože často zamrzne prohlížeč a je lepší jej nepoužívat.

Udělejme to jinak. Nastavíme levý okraj (CSS) "right_bok" na 100 % tak, aby se posunul za pravou hranici hlavního bloku, a poté jej vraťme zpět a posuneme jej doleva o počet pixelů rovný jeho šířce. IE6 pracuje s hodnotami těchto vlastností korektně, takže mu nezbývá nic jiného, ​​než umístit blok tam, kam potřebujeme.

Tento způsob zaoblení rohů je podobný předchozímu, ale na rozdíl od něj se zde po stranách neumisťují prvky HTML, ale ty přidané do hlavního bloku pseudo prvky. Díky tomuto přístupu bylo možné zbavit se zbytečného HTML kódu stránky.

Příklad HTML a CSS: Zaoblení rohů pomocí bočních pseudoprvků

Popis příkladu

1. Pomocí CSS pseudoprvků naznačíme, že chceme přidat něco na začátek a konec hlavního bloku. A pomocí vlastnosti CSS jen přidáme potřebné obrázky zaoblených rohů, nebo spíše stran. Vytvořili jsme tedy dva pseudoprvky s obrázky.
2. No a pak uděláme úplně to samé jako v předchozím příkladu, jen pracujeme s vytvořenými pseudoprvky.

Pro IE6 a IE7 byly v tomto příkladu použity následující „berličky“:

1. Jak víte, IE6 a IE7 nerozumí zde použitým pseudoprvkům, takže děláme následující. Používáme výraz výraz, který integruje dva tagy do hlavního prvku a dáváme jim stejné styly jako v předchozím příkladu. Všimněte si, že vložený kód, který následuje po prvním innerHTML, je přidán bezprostředně za úvodní značku „block“ a po druhé innerHTML je přidán před uzavírací značku. Ano, v našem případě to nevadí, protože se používá absolutní polohování, ale někdy je užitečné o tom vědět.
2. Abychom zabránili tomu, aby tento kód viděly jiné prohlížeče, přikládáme jej podmíněné komentáře. Bylo by lepší, kdybyste to vložili do samostatného CSS souboru, který je spojen se značkou uzavřenou se stejnými komentáři.

Zaoblené rohy v CSS pomocí obtékání bloků

Podstatou této metody je, že se nejprve vyříznou rohy obrázku. Poté se do hlavního bloku umístí několik dalších bloků (podle počtu rohů), které jsou vnořeny do sebe. Každý z nich má jako pozadí jeden obrazový roh. Obrázky je zakázáno reprodukovat a souřadnice jsou uvedeny tak, aby zabíraly místa v rozích bloků. Takto se dosáhne efektu zaoblených rohů.

Příklad HTML a CSS: Zaoblení rohů pomocí obtékání bloků

Popis příkladu

1. Do hlavního bloku umístíme další čtyři. Protože žádný z těchto bloků nemá okraje ani okraje a pouze ten nejvnitřnější má odsazení, jsou všechny stejně vysoké a široké.
2. Pomocí vlastnosti CSS nastavíme každý z vnitřních bloků do rohu jako pozadí, zakážeme jejich reprodukci a umístíme je do rohů bloků. A protože je barva pozadí prvků průhledná, jsou na stránce viditelné všechny čtyři rohy pozadí.
3. Přidejte požadovanou barvu pozadí do vnějšího bloku s rohem. Vše je připraveno.

Šířku bloku můžete explicitně nastavit zadáním požadované vlastnosti v class="block" , ale pro změnu výšky musíte použít nejvnitřnější prvek (pro nás je to "rb").

Zaoblené rohy v CSS pomocí polohování

I zde jsou vyříznuty rohy pro pozadí, které budou naznačeny na malých blocích. Pomocí CSS absolutního umístění jsou tyto bloky umístěny v rozích hlavního prvku, který má požadovanou barvu pozadí.

Příklad HTML a CSS: Zaoblení rohů pomocí umístění

Popis příkladu

1. Uvnitř hlavního prvku (class= "block") umístíme čtyři značky s třídami "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , které budou fungovat jako rohové bloky.
2. Pomocí vlastnosti CSS připojíme ke každému rohovému bloku vlastní obrázek na pozadí a nastavíme jeho šířku a výšku tak, aby se velikostí shodovaly s těmito obrázky na pozadí. Pro každý případ resetujeme velikost písma (CSS) a ořízneme přebytek (CSS).
3. Určujeme relativní umístění pro hlavní prvek (CSS:relative), protože rohové bloky umístíme relativně k němu, a pro samotné rohy - absolutní (absolutní).
4. Pomocí vlastností CSS a , určíme vertikální a horizontální vzdálenosti odsazení pro rohové bloky tak, aby byly umístěny v rozích hlavního bloku.

V IE6 je s touto metodou několik problémů:

1. Pokud není šířka "bloku" výslovně specifikována, pak rohy vlevo nezapadnou na místo. Důvodem je přítomnost vnitřního polstrování v bloku. Nejjednodušší způsob, jak problém vyřešit, je odstranit odsazení a uzavřít hlavní obsah „bloku“ (bez rohů) do dalšího obalu bloku a poté zadat požadované odsazení na obalu. Ale udělal jsem to jinak, když jsem povolil rozložení pomocí vlastnosti zoom:1, která říká IE6, aby zobrazil prvek v jeho přirozené velikosti. Tato vlastnost je neplatná, takže pokud se ji rozhodnete použít, doporučuji provést připojení přes podmíněné komentáře.
2. Stejná jednopixelová chyba, která byla diskutována výše. Zde se však mohou tvořit mezery nejen mezi pravými rohy a pravou stranou bloku, ale také ve spodní části. A pokud jsme se zbavili mezer napravo, tak to u spodních nepůjde. Řešením je explicitně zadat rovnoměrnou šířku a výšku hlavního prvku. Můžete také nastavit liché hodnoty, ale pak budete muset nastavit vzdálenosti pro offsety dolů a doprava tak, aby nebyly nula, ale -1px.

Technologie této metody zaoblení rohů v CSS je v podstatě stejná jako ta předchozí, takže zde budou vynechány podrobné komentáře. Jediný rozdíl je v tom, že místo samostatných rohových obrázků na pozadí je zde použit jeden společný obrázek sprite. Díky tomu se stránky načítají rychleji, protože jeden obrázek „váží“ méně než čtyři a hostování místo čtyř je jedno odvolání.

Sprite je obrázek, který kombinuje několik obrázků používaných jako pozadí pro prvky webu. Která část spritu bude pozadím konkrétního HTML elementu závisí na souřadnicích zadaných ve speciální CSS vlastnosti.

Příklad HTML a CSS: Zaoblení rohů pomocí umístění a sprite

Popis příkladu

1. Pomocí vlastnosti CSS připojíme k rohovým blokům obrázek spritu na pozadí, který má kulatý tvar o rozměrech 22x22 pixelů (11x11 pixelů pro každý čtvrtroh).
2. Pomocí vlastnosti CSS určíme souřadnice offsetu pozadí. Například hodnota -11px 0 znamená, že pozadí bude posunuto doleva o 11px na ose X, ale nebude posunuto na ose Y. Levá polovina sprajtu tedy překročí hranici prvku a zůstane pouze pravá. Viditelný je ale jen z poloviny, protože jeho výška je 22px a výška samotného rohového bloku je pouze 11px. Ukazuje se tedy, že s touto hodnotou bude pozadí prvku pravá horní čtvrtina spritu.

S IE6 jsou stejné problémy jako v předchozím příkladu.

V tomto příkladu budeme zaoblovat rohy prvku, který má ohraničení, ale to není specifická vlastnost této konkrétní metody – v předchozích příkladech můžete snadno použít zaoblení s ohraničením.

Samotné zaoblení provedeme pomocí pseudoprvků vytvořených z hlavního bloku, ale bez aplikování polohování na ně.

A ještě jedna věc. V předchozích příkladech byly rohy vyříznuty spolu s pozadím uvnitř a to není vždy nutné, zvláště pokud se očekává, že pozadí bloku se zaoblenými rohy bude nejednotné. Proto zde bylo pozadí uvnitř rámečku zprůhledněno (formát PNG to umožňuje) a při vyříznutí rohů se průhledný ukázal i jejich vnitřek. V případě potřeby můžete použít podobný přístup i v předchozích příkladech.

Příklad HTML a CSS: Zaoblení rohů pomocí pseudoprvků

pozadí a pomocí něj je umístíme na pravou stranu a zakážeme „reprodukci“. To je vše, rohy jsou připraveny.

Protože jsme specifikovali výplň pro „blok“ (CSS), pseudoprvky, a tedy rohy, nejsou umístěny v rozích bloku, ale jsou 15px od okrajů. Abychom to napravili, přiřadíme pseudoprvkům negativní okraje (CSS) na potřebné strany, aby byly umístěny na odsazení. Ale děláme okraje rovné ne 15, ale 17px, to je nutné pro pokrytí rámečku (CSS), jehož šířka je 2px (15+2=17). To je vše.

Pro IE6 a IE7 jsme použili již známé "berličky" s vkládáním HTML kódu sem, protože tyto prohlížeče nerozumí zde použitým pseudoprvkům:

1. Pomocí výrazu integrujeme do hlavního prvku dva tagy, které také převedeme na bloky. Pak do nich umístíme jednu visačku. A pak mají tyto značky stejné vlastnosti jako pseudoprvky. Jediné je, že navíc přidáme CSS vlastnost :relative, bez které rám překrývá rohy.

Nevýhodou této metody je, že nelze explicitně nastavit výšku bloku se zaoblenými rohy, protože pokud přesahuje velikost obsahu, pak se spodní rohy nebudou přitlačovat k okrajům. Tomu se lze vyhnout, pokud hlavní obsah stále uzavřete do jiného bloku a nastavíte jeho výšku.

Další příklad zaoblení rohů s pseudoprvky a bez přídavných bloků

Tento příklad je podobný předchozímu, ale zde používáme umístění k uspořádání pseudoprvků. Díky tomuto přístupu bylo možné explicitně specifikovat výšku bloku se zaoblenými rohy.

Příklad HTML a CSS: Zaoblené rohy, kde můžete změnit výšku bloku

A znovu, pro IE6 a IE7 přidáme několik dalších prvků do hlavního bloku pomocí výrazu a zavřeme kód v podmíněných komentářích. Tentokrát se ani nepokusíme napodobit pseudoprvky, ale uděláme to jednodušeji.

1. Do „bloku“ přidáme čtyři značky a aplikujeme na ně pozici. A pak jim jednoduše ukážeme rohy obrázku jako pozadí a umístíme je do rohů hlavního prvku. To znamená, že jednáme přesně jako v jedné z výše diskutovaných metod.
2. Chcete-li se zbavit chyby s jedním pixelem (která byla výše zmíněna více než jednou), přidejte k prvkům pravého rohu levý okraj (CSS) se 100% hodnotou a záporným posunem rovným -9px. Obecně, pokud si pamatujete, toto odsazení by se mělo rovnat šířce rohového bloku (u nás je to 11px), ale nezapomeňte na 2px okraj, který zde máme - musíme na něj umístit rohy (11px-2px=9px).

Mimochodem, ve skutečnosti by bylo jednodušší emulovat pseudoprvky, jako jsme to udělali v předchozím příkladu – takto by bylo méně dodatečného kódu. Ale ne v IE6, tento prohlížeč by potřeboval několik dalších „berliček“ a v důsledku toho by musel napsat dvě samostatné podmíněné komentáře- pro IE6 a IE7, a to by jen nafouklo kód...

Ve Firefoxu tato metoda funguje správně od verze 3.6 a v Opeře - od verze 10.0 jsem pro ně nepřišel s berličkami, protože je to málo relevantní.

Na internetu je mnoho příkladů a návodů pro zaoblení rohů bloku nebo stolu, ale tyto návody jsou zpravidla založeny na použití obrázků nebo na použití dalších bloků.

V dnešním tutoriálu vám ukážu, jak na to rohy kulatého stolu pouze pomocí CSS.

Přímé označení (Druhá tabulka se liší rozložením buněk v horním řádku):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam.	eleifend.

Pellentesque cursus, nunc ut facilisis hendrerit

BContentTables( border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; ; margin:0,7em auto ;

2. Odstraňte jakékoli pozadí z prvního řádku.

Tr.bCTable_Header (pozadí: žádné;)

3. Pomocí pseudotřídy:první dítě a kombinátoru > vyberte první buňku v tabulce. Zaokrouhlete levý horní roh první buňky. Pozadí prvního řádku se skládá z pozadí buněk tohoto řádku.

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; barva pozadí:#00843C ;)

4. Pomocí pseudotřídy:poslední-child a kombinátoru > vyberte poslední buňku v prvním řádku. Pro to zaokrouhlíme pravý horní roh.

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0;

5. Zaoblete spodní rohy posledního řádku. Nezapomeňte odstranit pozadí z posledního řádku; Pozadí řádku je nastaveno pozadím buněk posledního řádku.

BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-poloměr-okraje:0 0 10px 10px; -khtml-poloměr-okraje: 0 0 10px 10px;

6. Poté analogicky podle bodů 3-4 v posledním řádku zaoblíme rohy první a vnější buňky.

BContentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px;) . bContentTables tr:last-child td:last-child (poloměr okraje:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- poloměr:0 0 10px 0; -o-poloměr-okraj:0 0 10px 0;

Podpora prohlížeče

Všechny moderní prohlížeče podporují standardy hypertextového značení HTML5 a designové styly CCS3. A pokud váš web (šablona) podporuje moderní standardy, můžete provádět změny v designu, jako jsou zaoblení rohů, stíny, přechodové výplně, aniž byste se museli uchylovat k grafickým editorům.

Webmasteři všude používají zaoblené rohy na blocích a rámcích na webových stránkách. V tomto článku vám řeknu, jak zaoblit rohy obrázků a fotografií na webu bez použití programů třetích stran, pouze pomocí CSS.

Aby se příklady uvedené v článku správně zobrazily na vaší obrazovce, musíte používat nejnovější verze prohlížečů, FireFox, Chrome a ty, které jsou na nich založené: Yandex.Browser, Amigo atd.

Zaoblení rohů bloků DIV

Podle standardu CSS3 tak, že blok DIV měl zaoblené rohy, je třeba ho upravit hraniční poloměr, například takto:

Poloměr ohraničení: 10px;

Pro názornost nakreslíme dva bloky s rovnými a zaoblenými rohy:

Blok s pravými úhly

Blok se zaoblenými rohy

Zaoblení rohů obrázků

Analogicky s výše uvedeným příkladem můžete zaoblit rohy obrázků na webu, například fotografie. Pro názornost zakulatíme rohy pro fotografii ze stránky

Zde je obrázek bez zpracování CSS

A nyní se zaoblenými rohy:

Poloměr ohraničení: 10px;

Aby to bylo opravdu „krásné“, přidáme ze začátku nějaké lemovky...

Poloměr ohraničení: 10px; ohraničení: 5px #ccc solid;

a pak stíny:

Poloměr ohraničení: 10px; ohraničení: 5px #ccc solid; box-shadow: 0 0 10px #444;

Níže uvedená možnost (zaoblené rohy se stínem bez ohraničení) vypadá velmi podobně jako podložka pod myš:

Poloměr ohraničení: 10px; box-shadow: 0 0 10px #444;

A na závěr úplný výsměch obrazu

Poloměr okraje: 50 %; ohraničení: 5px #cfc solid; box-shadow: 0 0 10px #444;

Pokud obrázek otevřete v novém okně, uvidíte, že se (obrázek) nezměnil a všechny rohy, stíny a tak dále jsou jen výsledkem zpracování CSS styly podle vašeho prohlížeče.

Malá lyrická odbočka

Styl pohraniční zvětší velikost obrázku o velikost okraje. Pokud je zadána hodnota ohraničení: 5px, pak bude výsledný obrázek širší a vyšší o 10 pixelů. Mějte na paměti, že v některých případech nemusí rozložení webu fungovat.

Styl box-shadow neovlivňuje velikost obrázku, stín jako by přecházel přes sousední prvky. Při jeho používání netrpí rozvržení stránek.

Jak zaoblit rohy obrázků ve WordPressu

Ve všech výše uvedených příkladech jsem psal styly přímo do značek html kódu. Například poslední vypadá takto:

To je dobré, když potřebujete znovu uspořádat jeden obrázek nebo fotografii. Co když chcete všechno změnit? Nebudete lézt po celém svém webu, abyste upravili zobrazení každého z nich. Ve většině případů značka WordPress IMG definuje několik stylových tříd. Jeden jedinečným názvem souboru obrázku, druhý velikostí a další zarovnáním. Jeden z nich můžete doplnit výše uvedenými parametry.

Například pro všechny obrázky, pro které není zadáno zarovnání, v souboru styl.css Pro téma WordPress zadejte následující:

Alignnone ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )

Nebo nejpřísnější metoda pro všechny obrázky na webu. Pojďme předefinovat styl pro všechny značky IMG:

Img ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )

Poslední možnost je vhodná nejen pro WordPress, ale pro jakýkoli CMS. A to i pro jednoduché HTML stránky v případě, kdy při zobrazování obrázků tag IMG nejsou přiřazeny žádné třídy stylu. Ale buďte opatrní. Pokud přepíšete možnosti zobrazení tagu IMG změníte vzhled VŠECH obrázků na webu!

Místo závěru

Všechny příklady v článku jsou podmíněné a mají pouze demonstrovat některé možnosti CSS pro zpracování obrázků a ukázat, jak jednoduché to je.

Dobré ráno, odpoledne, večer nebo noc všem. Dmitrij Kostin je s vámi znovu a znovu. Jednoho dne jsem si prohlížel různé obrázky a pak se mi některé líbily. A měli je rádi, protože měly zaoblené hrany. Hned to vypadá zajímavěji. Nemyslíš? A proto bych vám v dnešní lekci rád řekl, jak ve Photoshopu zaoblit rohy, aby fotografie vypadala zajímavěji.

Na Photoshopu miluji to, že v mnoha případech lze stejnou věc udělat několika způsoby. Tak je to tady. Začněme s naším photoshopem.

Vyhlazování pomocí okrajů

Tato metoda je podobná předchozí, ale přesto velmi odlišná. Vše uděláme se stejným obrázkem.

Vytvořením tvaru

Třetí metoda se již radikálně liší od předchozích dvou. Takže si dejte na pár sekund pauzu a pokračujte. Obrázek nezměním a znovu načtu toto auto do Photoshopu.

Vidíš, s čím jsi skončil? Obrázek má zaoblené hrany a to vše proto, že je zobrazen pouze tam, kde je náš nakreslený zaoblený obdélník. Nyní ale můžete extra fotografii oříznout pomocí nástroje Rámeček, nebo můžete obrázek rovnou uložit a již budete mít samostatný obrázek se zaoblenými rohy.

Pokuste se udělat vše sami a zároveň mi řekněte, která z uvedených metod je pro vás výhodnější.

A mimochodem, pokud máte ve Photoshopu mezery nebo se ho jen chcete plně naučit v co nejkratším čase, tak vřele doporučuji si nějaký pustit skvělý kurz photoshop pro začátečníky. Kurz je dobře udělaný, vše je vyprávěno a ukázáno skvěle a každý materiál je probrán velmi podrobně.

No, pro dnešek končím svou lekci. Nezapomeňte se přihlásit k odběru nových článků a sdílet je se svými přáteli. Ráda jsem tě viděla na svém blogu. Zase na tebe čekám. čau čau.

S pozdravem Dmitrij Kostin