3,5 sur 5

Pensez-vous que c'est possible avec quelques balises et CSS pur faire un triangle évolutif ? Et le pentagone ? Mais une telle star ? Je pense que beaucoup de gens ne le pensent pas. En fait, c'est possible.

Donc, aujourd'hui, nous avons une post-expérience. Nous allons jouer avec la propriété CSS bien connue - border (et tout ce qui s'y rapporte). Au cours de l'expérience, nous verrons comment créer des polygones simples, une étoile et examinerons un cas où ces techniques peuvent être utilisées dans la pratique. Allons-y!

Formes géométriques simples

Alors commençons par exemples simples. Savez-vous comment dessiner un triangle ? en utilisant HTML et CSS ? Et comme ça :

HTML

CSS

.trapezoid ( alignement vertical : texte-bas ; )

Trapèze,
.polygon ( affichage : -moz-inline-block ; )

Polygone,
.trapezoid (marge:0; remplissage: 0; arrière-plan: aucun; )

Polygone (largeur : 10 em ; hauteur : 10 em ; bordure : aucune ; affichage : bloc en ligne ; alignement du texte : centre ; )
.trapèze (
affichage : bloc en ligne ; largeur : 1px ; hauteur : 0 ; marge : 0 automatique ;
bordure gauche : 5em transparent uni ; bordure droite : 5em transparent uni ;
}

Polygone .aa ( bordure inférieure : 10em solide ; bordure supérieure : aucune ; )

Polygone.r2 ( hauteur : 0em ; )

Polygone.r3 ( hauteur : 8,66em ; )
.polygon.r3 .trapezoid (largeur de bordure : 8,66em 5em ; )

div.eg ( largeur : 10em ; arrière-plan : #FFF ; marge : 0 0 ; remplissage : 1em ; )
div.eg .polygon ( affichage : bloc ; marge : 0 auto ; )

R3 ( couleur : rouge ; taille de police : 0,5em ; )

Étoile

HTML

Étoile

CSS

#étoile(
largeur : 15em ;
hauteur : 14,27em ;
position : relative ;
}

#étoile durée,
#étoile(
affichage : bloc ;
}

#haut(
largeur : 0 ;
hauteur : 0 ;
marge : auto ;
bordure droite : 4,64em transparent solide ;
bordure gauche : 4,64em transparent solide ;
bordure inférieure : 14,27em solide ;
}

#centre(
largeur : 5,7em ;
bordure droite : 4,65em transparent uni ;
bordure gauche : 4,65em transparent uni ;
bordure supérieure : 3,36em solide ;
hauteur : 0 ;
position : absolue ;
haut : 5,46em ;
gauche : 0 ;
indice z : 100 ;
alignement du texte : centre ;
}

#bas(
position : absolue ;
bas : 0 ;
à gauche : 2,852em ;
bordure droite : 4,635em transparent solide ;
bordure gauche : 4,635em transparent solide ;
bordure inférieure : 3,4em solide #fff ;
largeur : 0 ;
hauteur : 0 ;
}

#travée centrale(
marge supérieure : -2em ;
couleur : #000 ;
poids de la police : gras ;
}

a#star:survolez #center span(
couleur : #fff ;
couleur d'arrière-plan : transparent ;
}

une#étoile(
couleur : #f90 ;
couleur d'arrière-plan : transparent ;
}
a#star:survol(
couleur : #fc3 ;
couleur d'arrière-plan : transparent ;
}

Quelques exemples supplémentaires

• Sapin de Noël et mise en page insolite d'Eric Meyer ;
• Tuiles et menus du technologue en chef de Technocracy ;

Bordure CSS Un élément est constitué d'une ou plusieurs lignes entourant le contenu de l'élément et son remplissage. La bordure est spécifiée à l'aide de la propriété raccourcie border. Le style du cadre est défini à l'aide de trois propriétés : style, couleur Et largeur.

Décorer les cadres et les bordures des éléments HTML à l'aide des propriétés CSS

1. Style bordure

Par défaut, les bordures sont toujours dessinées au-dessus de l'arrière-plan de l'élément, l'arrière-plan s'étendant jusqu'au bord extérieur de l'élément. Le style du cadre détermine son affichage ; sans cette propriété, les cadres ne seront pas visibles du tout. Pour un élément, vous pouvez définir une bordure pour tous les côtés simultanément à l'aide de la propriété border-style, ou pour chaque côté séparément à l'aide des propriétés de qualification border-top-style, etc. Pas hérité.

style bordure (style bordure supérieure, style bordure droite, style bordure inférieure, style bordure gauche)
Valeurs:
aucun	La valeur par défaut signifie pas de cadre. Supprime également la bordure d'un élément d'un groupe d'éléments avec une valeur définie de cette propriété.
caché	Équivalent à aucun.
pointé	pointé
en pointillés	en pointillés
solide	solide
double	double
rainure	rainure
crête	crête
encart	encart
début	début
{1,4}	Répertorier simultanément quatre styles différents pour la bordure d'un élément, uniquement pour la propriété border-style : (style de bordure : pointillé plein, aucun pointillé ;)
initial
hériter

Syntaxe

P (style de bordure : solide ;) p (style de bordure supérieure : solide ;)

2. Couleur du cadre couleur de la bordure

La propriété définit la couleur des cadres de tous les côtés en même temps. À l'aide des propriétés de clarification, vous pouvez définir une couleur différente pour la bordure de chaque côté de l'élément. Si aucune couleur n'est spécifiée pour le cadre, elle sera la même que la couleur du texte de l'élément. S'il n'y a pas de texte dans l'élément, alors la couleur de la bordure sera la même que celle du texte. élément parent. Pas hérité.

couleur de la bordure (couleur de la bordure supérieure, couleur de la bordure droite, couleur de la bordure inférieure, couleur de la bordure gauche)
Valeurs:
transparent	Définit la couleur transparente de la bordure. Dans le même temps, la largeur du cadre demeure. Peut être utilisé pour changer la couleur de la bordure lorsque vous passez la souris sur un élément afin d'éviter que l'élément ne soit déplacé.
couleur	La couleur des cadres est définie à l'aide des valeurs de la propriété. (couleur de la bordure : #cacd58 ;)
{1,4}	Transfert simultané de quatre différentes couleurs pour les bordures d'éléments, uniquement pour la propriété border-color : (couleur de la bordure : #cacd58 #5faf8a #b9cea5 #aab238 ;)
initial	Définit la valeur de la propriété sur la valeur par défaut.
hériter	Hérite de la valeur de propriété de l'élément parent.

Syntaxe

P (couleur de la bordure : #cacd58 ;)

3. Largeur de bordure

La largeur du cadre est spécifiée en unités de longueur ou mots-clés. Si la propriété border-style est définie sur none et que la bordure de l'élément est définie sur une certaine largeur, alors dans ce cas La largeur du cadre est définie sur zéro. Pas hérité.

Syntaxe

P (largeur de bordure : 2 px ;)

4. Définir un cadre avec une propriété

La propriété border permet de combiner les propriétés suivantes : border-width , border-style , border-color , par exemple :

Div (largeur : 100 px ; hauteur : 100 px ; bordure : 2 px gris uni ; )

En même temps propriétés spécifiées sera appliqué simultanément à toutes les bordures d’éléments. Si aucune valeur n'est spécifiée, la valeur par défaut prendra sa place.

5. Définir un cadre pour une bordure d'un élément

Dans le cas où vous devez définir un style différent pour les bordures d'un élément, vous pouvez utiliser brève note pour la limite correspondante.
Les propriétés répertoriées ci-dessous combinent les propriétés suivantes en une seule déclaration : border-width , border-style et border-color . La liste des propriétés est spécifiée dans un ordre donné, tandis qu'une ou deux valeurs peuvent être ignorées, auquel cas leurs valeurs prendront les valeurs par défaut.

Le style de la bordure supérieure est défini à l'aide des propriétés border-top, bottom - border-bottom , left - border-left et right - border-right .

Syntaxe

P (bordure supérieure : 2 px, gris uni ;)

6. Contour externe

La propriété spécifie une bordure extérieure autour des éléments (c'est-à-dire en dehors de la bordure normale). Le but principal de cette propriété est de mettre en valeur un élément. Contrairement à la propriété border, l'application de cette propriété n'affecte pas la taille ou la position de l'élément, car le contour est affiché au-dessus du bloc d'éléments, ce qui peut entraîner un chevauchement margesélément et les zones voisines.

De plus, le contour extérieur, contrairement au cadre de l’élément, entoure l’élément de tous les côtés, l’encadrant entièrement.

Le contour extérieur est toujours rectangulaire et ne suit pas la bordure du bloc pour lequel le rayon de bordure est spécifié.

La propriété outline vous permet de combiner les propriétés suivantes : outline-color , outline-style , outline-width . Si aucune valeur n'est spécifiée, la valeur par défaut prendra sa place.

Div (largeur : 100 px ; hauteur : 100 px ; contour : #cacd58 solid 2px ; )

6.1. style de contour

L'apparence de la ligne de contour externe est définie de la même manière que le style du cadre de l'élément. Pas hérité.

Syntaxe

P (style de contour : crête ;)

6.2. Couleur du contour extérieur couleur du contour

La couleur du contour extérieur ne peut être spécifiée que lorsque valeur définie style de contour. Pas hérité.

Syntaxe

P ( style de contour : crête ; couleur du contour : argent ; )

6.3. Épaisseur du contour extérieur largeur du contour

L'épaisseur de la ligne de contour extérieure est définie de la même manière que l'épaisseur du cadre de l'élément. Pas hérité.

Syntaxe

P (style de contour : pointillé ; largeur du contour : 5 px ; )

Bien sûr, vous pouvez créer de la beauté dans Photoshop, mais que se passe-t-il si vous devez enregistrer le texte et ne pas le coller avec une belle image ?

Par exemple, pour une meilleure indexation, j'ai voulu mettre le texte du titre en balises

. Mais en même temps, préservez la beauté. Comme ça:

Alors, créons du texte avec une ombre en utilisant CSS :

CSS de niveau 3 possède la propriété "text-shadow" pour ajouter une ombre à chaque lettre de n'importe quel texte.

1. Forme la plus simple: h3 (texte-ombre : 0,1em 0,1em #333)
2. Ombres de texte floues : h3.b (texte-ombre : 0,1em 0,1em 0,2em noir)
3. Texte blanc lisible : h3.a (couleur : blanc ; texte-ombre : noir 0,1em 0,1em 0,2em)
4. Ombres superposées : h3 (texte-ombre : 0,2em 0,5em 0,1em #600, -0,3em 0,1em 0,1em #060, 0,4em -0,3em 0,1em #006)
5. Dessiner des lettres et des contours : h3 (text-shadow : -1px 0 noir, 0 1px noir, 1px 0 noir, 0 -1px noir)
6. lueur au néon: h3.a (texte-ombre : 0 0 0.2em #8F7) h3.b (texte-ombre : 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (texte-ombre : 0 0 0,2em #87F, 0 0 0,2em #87F, 0 0 0,2em #87F)

Autre exemple intéressant :

Décrire du texte avec CSS

Texte de trait avec en utilisant CSS Il est possible de le faire sans recourir à des scripts. Cet effet peut être créé à l’aide de la propriété text-shadow. Bien qu'IE n'accepte cette propriété dans aucune de ses versions - dans les autres navigateurs populaires La recette décrite fonctionnera très bien.

Considérez le code ci-dessous :

Exemple n°1

H1 (texte-ombre : rouge 1px 0px, rouge 1px 1px, rouge 0px 1px, rouge -1px 1px, rouge -1px 0px, rouge -1px -1px, rouge 0px -1px, rouge 1px -1px ;)

Le premier paramètre de la propriété text-shadow définit la couleur de l'ombre, le deuxième le décalage horizontal de l'ombre par rapport au texte, le troisième le décalage vertical. Lorsque vous spécifiez un décalage d'ombre dans toutes les directions autour du texte d'un pixel à tour de rôle, vous obtenez l'effet de trait.

Exemple de course n°1

Pour rendre le trait plus saturé, vous pouvez utiliser le quatrième paramètre text-shadow, qui est responsable du rayon de flou de l'ombre :

Exemple n°2

H1 (texte-ombre : rouge 1px 0px, rouge 1px 1px, rouge 0px 1px, rouge -1px 1px, rouge -1px 0px, rouge -1px -1px, rouge 0px -1px, rouge 1px -1px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px, rouge 0 0 3px ;)

Exemple de course n°2

Si vous le remarquez, la propriété "red 0 0 3px" est répétée plusieurs fois. C’est là que réside l’effet de saturation. Pour obtenir une apparence plus claire du trait, la propriété peut être ajoutée avec d'autres paramètres grand nombre une fois. Le seul inconvénient est que cela peut ralentir considérablement le navigateur sur les ordinateurs les plus faibles.

La propriété CSS border permet de créer la bordure d'un objet, à savoir l'épaisseur de la bordure, sa couleur et son style. Cette propriété est largement utilisée en HTML. Vous pouvez créer divers effets pour une meilleure perception du contenu de la page. Par exemple, concevez une barre latérale, un en-tête de site Web, un menu, etc.

1. Syntaxe de bordure CSS

frontière : largeur de la bordure style de la bordure couleur de la bordure | hériter;

• border-width - épaisseur de la bordure. Vous pouvez le définir en pixels (px) ou utiliser les valeurs standards fin, moyen, épais (elles ne diffèrent que par la largeur en pixels)
• border-style - style de la bordure affichée. Peut prendre valeurs suivantes
  • aucun ou masqué - annule la bordure
  • pointillé - cadre en pointillés
  • pointillé - cadre composé de tirets
  • solide - ligne simple (le plus souvent utilisé)
  • double - double cadre
  • rainure - bordure 3D rainurée
  • crête, insert, début - divers effets de cadre 3D
  • hériter - la valeur de l'élément parent est appliquée
• border-color - couleur de la bordure. Peut être réglé à l'aide nom spécifique couleurs ou en Format RVB(voir noms des couleurs html pour le site)

Note

Les valeurs de la propriété CSS border peuvent être définies dans n'importe quel ordre. La séquence la plus couramment utilisée est la « couleur de style épaisseur ».

2. Exemples avec différentes bordures CSS

2.1. Exemple. Différents styles de conception de bordure border-style

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

Texte de plan

Le contour réalisé par cette méthode est montré sur la Fig. 1. Le contour s'avère légèrement flou, donc pour ceux qui souhaitent obtenir une ligne claire, la deuxième méthode est destinée. Il réside dans en utilisant quatre ombres nettes de la même couleur, elles sont décalées sous des angles différents d'un pixel (exemple 2).

Exemple 2. Quatre ombres pour le contour

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Texte de plan

L’apparence d’un tel contour est représentée sur la Fig. 3. On remarque que le contour est plus expressif.

Riz. 3. Circuit avec avec l'aide de quatre ombres

Pour ajouter l'effet de texte 3D illustré à la Fig. 4, plusieurs ombres sont appliquées simultanément, qui sont décalées les unes par rapport aux autres d'un pixel horizontalement et verticalement.

Riz. 4. Texte 3D

Personnellement, ce type de texte me rappelle le lettrage de style rétro et, encore une fois, il convient mieux aux titres qu'au corps d'une page Web.

Le nombre d'ombres dépend de la mesure dans laquelle vous souhaitez « tirer » le texte vers l'avant. Plus augmente la « profondeur » des lettres, moins, au contraire, réduit la tridimensionnalité. L'exemple 3 utilise cinq ombres de la même couleur.

Exemple 3 : Ombre pour ajouter de la tridimensionnalité

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Réfrigérateur à dix chambres

Pour toutes les ombres, nous définissons le rayon de flou sur zéro et la même couleur. Les ombres diffèrent uniquement par leurs valeurs de décalage.

Gaufrage de texte

Pour créer un effet de gaufrage de texte ou, en d'autres termes, de relief, la couleur du texte doit correspondre à la couleur de fond. Une partie des lettres « dépassant » de la surface semble éclairée, tandis que l’autre partie est dans l’ombre (Fig. 5).

Riz. 5. Texte en relief

Pour ajouter un effet similaire, nous avons besoin de deux ombres - nous déplaçons l'ombre blanche d'un pixel vers la gauche et l'ombre gris foncé vers la droite (exemple 4).

Exemple 4 : Texte en relief

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Texte en relief

Le relief est plus beau sur un fond gris, l'effet ne convient donc pas à tout le monde jeu de couleurs site. À propos, il est facile d’appuyer sur du texte plutôt que d’extruder le texte ; il suffit d’échanger les couleurs des ombres.

Texte-ombre : #333 -1px -1px 0, #fff 1px 1px 0 ;

Briller

La lueur autour du texte est la même ombre, mais elle est lumineuse et contrastée. Ainsi, pour créer un effet lumineux, il suffit de changer la couleur de l'ombre et de définir le rayon de flou souhaité. Étant donné que la lueur autour du texte doit être uniforme, le décalage de l'ombre doit être défini sur zéro. Sur la fig. La figure 6 montre un exemple de lueur de différentes couleurs.

Riz. 6. Texte lumineux

Exemple 5. Lueur

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Côté lumineux

Côté obscur

Se brouiller

L'ombre elle-même est floue, donc si nous laissons uniquement l'ombre et masquons le texte lui-même, nous obtiendrons des lettres floues (Fig. 7) et le degré de flou peut être facilement ajusté à l'aide du paramètre text-shadow.

Riz. 7. Texte flou

Se cacher texte original il suffit de définir la couleur comme transparente (exemple 6). La couleur de l'ombre fait alors office de couleur du texte et le rayon de flou définit le degré de flou des lettres.

Exemple 6 : texte flou

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Texte flou

Ombre et pseudo-classes

L'ombre n'a pas besoin d'être ajoutée directement au texte ; la propriété text-shadow fonctionne bien avec les pseudo-classes :hover et :first-letter. Grâce à cela, nous obtenons effets intéressants avec du texte comme le contour de la première lettre d'un paragraphe ou la lueur d'un lien lorsque vous passez le curseur de la souris dessus. L'exemple 7 montre de telles techniques.

Exemple 7 : Utilisation de pseudo-classes

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Un projet de niche ralentit le canal traditionnel, quels que soient les coûts. La structure du marché, en ignorant les détails, stabilise le service marketing et commercial, en utilisant l'expérience des campagnes précédentes. Bien entendu, la construction d’une marque repousse spontanément les relations publiques convergentes et conquiert un segment de marché. L’investissement synchronise le rôle statut social , augmentant la concurrence. Marque