|
|
| (8 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| /* ===================================================== | | /* Conteneur principal */ |
| STYLES LETTRINE - Modèle:Lettrine/styles.css
| | .lettrine-conteneur { |
| ===================================================== */
| | display: inline; |
| | } |
|
| |
|
| /* Style de base de la lettrine */ | | /* La lettrine elle-même */ |
| .lettrine { | | .lettrine { |
| /* Typographie */
| |
| font-family: 'Cinzel Decorative', Georgia, serif;
| |
| font-weight: 700;
| |
|
| |
| /* Dimensions */
| |
| font-size: 4em;
| |
| line-height: 0.8;
| |
|
| |
| /* Positionnement flottant */
| |
| float: left; | | float: left; |
| margin: 0.1em 0.2em 0 0; | | font-size: 3.5em; |
| padding: 0.05em 0.1em; | | line-height: 1; |
| | | margin: 0 0.1em 0 0; |
| /* Effets visuels */ | | padding: 0; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | | font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', 'Old English Text MT', serif; |
| color: #8B4513;
| | font-weight: normal; |
| | text-shadow: 2px 2px 4px rgba(0,0,0,0.4); |
| } | | } |
|
| |
|
| /* Texte suivant la lettrine (petites capitales) */ | | /* Petites capitales suivant la lettrine */ |
| .lettrine-texte { | | .lettrine-texte { |
| font-variant: small-caps; | | font-variant: small-caps; |
| font-weight: 600; | | font-weight: 600; |
| letter-spacing: 0.08em; | | letter-spacing: 0.08em; |
| font-size: 1.1em; | | font-size: 1.05em; |
| text-transform: lowercase;
| |
| margin-left: 0.1em;
| |
| }
| |
| | |
| /* =====================================================
| |
| VARIANTES DE STYLE
| |
| ===================================================== */
| |
| | |
| /* Style gothique médiéval (Fraktur) */
| |
| .lettrine-fraktur {
| |
| font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', serif;
| |
| font-weight: normal;
| |
| font-size: 4.2em;
| |
| line-height: 0.75;
| |
| }
| |
| | |
| /* Style gothique classique */
| |
| .lettrine-classic {
| |
| font-family: 'Fette Unz Fraktur Classic', 'Fette Unz Fraktur', serif;
| |
| font-weight: normal;
| |
| font-size: 4.2em;
| |
| line-height: 0.75;
| |
| }
| |
| | |
| /* Style décoratif moderne */
| |
| .lettrine-decorative {
| |
| font-family: 'Cinzel Decorative', serif;
| |
| font-weight: 700;
| |
| }
| |
| | |
| /* Style extra-gras */
| |
| .lettrine-black {
| |
| font-family: 'Cinzel Decorative', serif;
| |
| font-weight: 900;
| |
| font-size: 4.2em;
| |
| }
| |
| | |
| /* Style simple sans empattement */
| |
| .lettrine-simple {
| |
| font-family: Georgia, 'Times New Roman', serif;
| |
| font-weight: bold;
| |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
| |
| }
| |
| | |
| /* =====================================================
| |
| EFFETS DÉCORATIFS AVANCÉS
| |
| ===================================================== */
| |
| | |
| /* Lettrine avec ombre portée accentuée */
| |
| .lettrine-ombre {
| |
| text-shadow:
| |
| 3px 3px 0 rgba(0, 0, 0, 0.15),
| |
| 5px 5px 8px rgba(0, 0, 0, 0.4);
| |
| }
| |
| | |
| /* Lettrine avec contour */
| |
| .lettrine-contour {
| |
| text-shadow:
| |
| -1px -1px 0 rgba(0, 0, 0, 0.4),
| |
| 1px -1px 0 rgba(0, 0, 0, 0.4),
| |
| -1px 1px 0 rgba(0, 0, 0, 0.4),
| |
| 1px 1px 0 rgba(0, 0, 0, 0.4),
| |
| 2px 2px 6px rgba(0, 0, 0, 0.6);
| |
| }
| |
| | |
| /* Lettrine enluminée (fond décoratif) */
| |
| .lettrine-enluminee {
| |
| background: linear-gradient(135deg,
| |
| rgba(218, 165, 32, 0.3) 0%,
| |
| rgba(184, 134, 11, 0.2) 100%);
| |
| border-radius: 6px;
| |
| padding: 0.15em 0.2em;
| |
| box-shadow:
| |
| 0 0 10px rgba(218, 165, 32, 0.4),
| |
| inset 0 1px 3px rgba(255, 255, 255, 0.2);
| |
| }
| |
| | |
| /* Lettrine avec bordure dorée */
| |
| .lettrine-bordure {
| |
| border: 2px solid currentColor;
| |
| border-radius: 4px;
| |
| padding: 0.1em 0.15em;
| |
| } | | } |
|
| |
|
| /* ===================================================== | | /* Responsive */ |
| RESPONSIVE
| | @media (max-width: 768px) { |
| ===================================================== */
| |
| | |
| @media screen and (max-width: 768px) { | |
| .lettrine { | | .lettrine { |
| font-size: 3em; | | font-size: 3em; |
| margin: 0.08em 0.15em 0 0;
| |
| }
| |
|
| |
| .lettrine-fraktur,
| |
| .lettrine-classic,
| |
| .lettrine-black {
| |
| font-size: 3.2em;
| |
| }
| |
|
| |
| .lettrine-texte {
| |
| font-size: 1em;
| |
| letter-spacing: 0.05em;
| |
| } | | } |
| } | | } |
|
| |
|
| @media screen and (max-width: 480px) { | | @media (max-width: 480px) { |
| .lettrine { | | .lettrine { |
| font-size: 2.5em; | | font-size: 2.5em; |
| margin: 0.05em 0.1em 0 0;
| |
| }
| |
|
| |
| .lettrine-fraktur,
| |
| .lettrine-classic,
| |
| .lettrine-black {
| |
| font-size: 2.7em;
| |
| } | | } |
| } | | } |
|
| |
|
| /* ===================================================== | | /* Impression */ |
| IMPRESSION
| |
| ===================================================== */
| |
| | |
| @media print { | | @media print { |
| .lettrine { | | .lettrine { |
| | color: #000; |
| text-shadow: none; | | text-shadow: none; |
| color: #000;
| |
| }
| |
|
| |
| .lettrine-enluminee {
| |
| background: none;
| |
| box-shadow: none;
| |
| } | | } |
| } | | } |
/* Conteneur principal */
.lettrine-conteneur {
display: inline;
}
/* La lettrine elle-même */
.lettrine {
float: left;
font-size: 3.5em;
line-height: 1;
margin: 0 0.1em 0 0;
padding: 0;
font-family: 'Fette Unz Fraktur', 'UnifrakturMaguntia', 'Old English Text MT', serif;
font-weight: normal;
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
/* Petites capitales suivant la lettrine */
.lettrine-texte {
font-variant: small-caps;
font-weight: 600;
letter-spacing: 0.08em;
font-size: 1.05em;
}
/* Responsive */
@media (max-width: 768px) {
.lettrine {
font-size: 3em;
}
}
@media (max-width: 480px) {
.lettrine {
font-size: 2.5em;
}
}
/* Impression */
@media print {
.lettrine {
color: #000;
text-shadow: none;
}
}
