Autopassion.net le site ddi  l'automobile cr par ses utilisateurs
Partagez | .
Mon bac à CSS !
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Mon bac à CSS !   Sam 23 Juin - 18:50





boite musicale test
unit 01<
unit 02<




Toi qui vient d'imprudement mettre tes pieds dans mon bac à sable,
Sache que je te maudits !
Tu viens d'écraser mes pâtés de sables ! (si si, sous tes pieds...)

Toi qui viens demander un code,
Sache que ton âme, tu me devras.
Le staff n'autorisant pas le paiement par yens...






Eleanor - Alexei - Spyro - Nobio




Dernière édition par Ai Enma le Mer 12 Déc - 18:30, édité 36 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Sam 23 Juin - 18:55

THEME DARK BETA 0.2 ai enma.




Welcome to Hell.


Feat: Name perticipants



Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Tec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


Bon ben c'est ici que ça cause !



Vec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Mec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


Et là, s'expriment tes plus noires pensées...



Vec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.






A placer dans le post.
Code:

<link rel="stylesheet" type="text/css" href="http://www.ellynn.fr/externe/themes/theme_dark/theme_dark.css" />
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Roboto|Tangerine" rel="stylesheet">
<div id="masterdark">
<div id="globaldark">
<div id="blocmastertitredark"><p id="mastertitredark">Welcome to Hell.</p></div>
<div id="blocmasterfeatdark"><span id="masterfeatdark">Feat: Name perticipants</span></div>
<div id="contenudark">
<p class="textedark">
ICI TEXTE</p>
<div id="contdialoguedark"><p class="dialoguedark">Bon ben c'est ici que ça cause !</p></div>
<p class="textedark">
ICI TEXTE

ICI TEXTE
</p>
<div id="contpenseedark"><p class="penseedark">Et là, s'expriment tes plus noires pensées...</p></div>
<p class="textedark">
ICI TEXTE
</p>
</div>
</div><!-- globaldark-->
</div><!-- masterdark-->

Feuille de style CSS. (à placer sur votre serveur, penser à modifier les URLs !)
Code:

/* CSS THEME_DARK  by AI ENMA 22/06/18 */
@font-face {
    font-family: tangerinebold;
    src: url("http://www.ellynn/externe/themes/theme_dark/fonts/tangerine/tangerine-bold-webfont.woff2") format("woff2"),
         url("http://www.ellynn/externe/themes/theme_dark/fonts/tangerine/fonts/tangerine/tangerine-bold-webfont.woff") format("woff");
         url("http://www.ellynn/externe/themes/theme_dark/fonts/tangerine/fonts/tangerine/Tangerine-Bold.ttf") format("truetype");
/* font-size: 50px; */
/* font-weight: normal; */
/* font-style: normal; */
/* PB! */
}

#masterdark {
width: 600px;
margin: 0 auto;
border: 2px solid #B70308;
padding: 12px;
background-color: #000000;
box-shadow: 2px 2px 5px #000000;

}

#globaldark {
width: 588px;
border: 1px solid #B70708;
margin: 0 auto;
background-color: #000000;
background-image: url("images/dark.jpg");
background-size: contain;
background-position: 0px 0px;
background-origin: border-box;
background-repeat: no-repeat;
}

#contenudark {
width: 550px;
margin: 0 auto;
margin-top: 0px;
/* background-color: rgba(140, 140, 140, 0.8); */

background: linear-gradient(0deg, rgba(39,31,31,1) 45%, rgba(39,31,31,0.7) 65%, rgba(65,58,58,0.9) 100%);

border: 1px solid #ffffff;
}

#blocmastertitredark{
margin-top: -90px;
margin-left:-30px;
height: 80px;
}

#blocmasterfeatdark{
margin-top: 250px;
margin-left:-20px;
height: 50px;
}

#mastertitredark {
font-family: Tangerine, cursive;
font-size: 80px;
font-weight: bold;
padding: 50px;
    background: -moz-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(41,0,0,1)), color-stop(57%, rgba(252,0,0,1)), color-stop(57%, rgba(252,0,0,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* ie10+ */
    background: linear-gradient(0deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#290000', endColorstr='#FC0000',GradientType=0 ); /* ie6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#masterfeatdark{
font-family: Tangerine, cursive;
font-size: 30px;
font-weight: bold;
padding: 30px;
    background: -moz-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(41,0,0,1)), color-stop(57%, rgba(252,0,0,1)), color-stop(57%, rgba(252,0,0,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(90deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* ie10+ */
    background: linear-gradient(0deg, rgba(252,0,0,1) 43%, rgba(252,0,0,1) 43%, rgba(41,0,0,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#290000', endColorstr='#FC0000',GradientType=0 ); /* ie6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#contdialoguedark {
width: 550px;
margin-left: -54px;
border: 2px solid #B70308;
padding: 6px;
background-image: url("images/lys02.png");
background-position: left center;
background-repeat: repeat-y;
background-color: #000000;
box-shadow: -2px -2px 5px #000000;
}

#contpenseedark {
width: 550px;
margin-left: 40px;
border: 2px solid #B70308;
padding: 6px;
background-image: url("images/lys02.png");
background-position: right center;
background-repeat: repeat-y;
background-color: #000000;
box-shadow: 2px 2px 5px #000000;
}

.titreparagraphedark {

}

p.textedark {
font-style: normal;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #CECECE;
}

p.dialoguedark {
font-weight: bold;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
text-align: justify;
padding: 12px;
margin-left: 67px;
color: #CA0000;
}

p.penseedark {
font-style: italic;
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 12px;
margin-right: 67px;
color: #CA0000;
}

/* font dispo
font-family: 'Roboto', sans-serif;
font-family: 'Tangerine', cursive;
font-family: 'Great Vibes', cursive;
*/


Dernière édition par Ai Enma le Mer 28 Nov - 7:00, édité 11 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Dim 24 Juin - 13:57

WORK IN PROGRESS. THEME RIOT_GIRL 0.1 /* basé sur thème_dark */ ai enma.





 

The Show Must Go On


Feat: des noms



Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


Causeries et autres considérations métaphysiques...


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


Je pense donc j'explose !...


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.





 




Code html
Code:

<link rel="stylesheet" type="text/css" href="http://www.ellynn.fr/externe/themes/theme_riot_girl/riot_girl.css" />
<link href="https://fonts.googleapis.com/css?family=Butterfly+Kids|Fredericka+the+Great|Indie+Flower|Marck+Script|Patrick+Hand|Reenie+Beanie|Sacramento" rel="stylesheet">
<div id="masterriot">
<div id="globalriot">
<div id="riotgirl">&nbsp;</div>
<div id="blocmastertitreriot"><p id="mastertitreriot">The Show Must Go On</p></div>
<div id="blocfeatpink"><div id="blocmasterfeatriot"><p id="masterfeatriot">Feat: des noms</p></div></div>
<div id="contenuriot">
<p class="texteriot">Texte</p>
<div id="contdialogueriot"><p class="dialogueriot">Dialogue</p></div>
<p class="texteriot">Texte</p>
<div id="contpenseeriot"><p class="penseeriot">Pensées</p></div>
<p class="texteriot">Texte</p>
</div><!-- contenuriot -->
</div><!-- globalriot -->
</div><!-- masterriot -->

<div id="masterfooterriot">
<div id="globalfooterriot">
<div id="contfooterriot">
<a id="riot" href="#">Fiche Personnage</a><a id="riot" href="#">Fiche Technique</a><a id="riot" href="#">Liens Rp</a><a id="riot" href="#">Chronologie</a>
</div><!-- masterfooterriot -->
</div><!-- globalfooterriot -->
</div><!-- contfooterriot -->


Code CSS
Code:

/* CSS THEME_RIOT_GIRL by AI ENMA 24/06/18  */

/*
@import url('https://fonts.googleapis.com/css?family=Butterfly+Kids|Fredericka+the+Great|Marck+Script|Patrick+Hand|Reenie+Beanie|Sacramento');
*/

/*
@font-face {
    font-family: 'overflowing';
    src: url('overflowing.eot');
    src: url('overflowing.eot?#iefix') format('embedded-opentype'),
         url('overflowing.woff2') format('woff2'),
         url('overflowing.woff') format('woff'),
         url('overflowing.ttf') format('truetype');
font-size: 40px;    
font-weight: bold;
font-style: normal;
color: #FFC0EB;
}
*/

#masterriot {
width: 610px;
margin: 0 auto;
margin-top: 50px;
border: 2px solid #FF84B4;
/* padding: 4px; */
background-color: #5D5D5D;
/* box-shadow: 2px 2px 5px #5D5D5D; */
box-shadow:
3px 3px 10px #3F002B, /* ombrage */
-3px -3px 10px #FFC0EB, /* lumiere */
inset 0 0 5px #3F002B;
}

#riotgirl {
width: 590px;
height: 600px;
margin-top: -150px;
background-image: url("images/riot_girl_final.png");
background-size: contain;
background-position: 0px 0px;
background-origin: border-box;
/* background-repeat: repeat-y; */
}

#globalriot {
width: 590px;
border: 1px solid #FF84B4;
margin: 0 auto;
background-color: #BBB3B3;
background-image: url("images/pavement_raccordable.jpg");
background-size: contain;
background-position: 0px 0px;
background-origin: border-box;
background-repeat: repeat-y;
}

#contenuriot {
width: 550px;
margin: 0 auto;
margin-top: 100px;
/* background-color: rgba(140, 140, 140, 0.8); */
background-color: rgba(255, 192, 235, 0.7);
box-shadow: inset 0 0 5px #3F002B;
border: 1px solid #FF84B4;
-moz-border-radius: 0px 25px 25px 0px;
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}

#blocmastertitreriot {
margin-top: -240px;
width: 100%;
height: 100%;
/* border: 1px solid #000000;  */
/* margin-left:-30px; */
/* height: 80px; */
}

/* POSITION BLOCK IMAGE  FEAT */
#blocfeatpink {
width: 260px;
height: 260px;
/* border: 1px solid #FF84B4; */
margin-top: -430px;
margin-left: 310px;
background-image: url("images/feat_pink.png");
background-size: contain;
background-position: 0px 0px;
background-origin: border-box;
background-repeat: no-repeat;
/* border: 1px solid #fff000; */
}
/* POSITION BLOCK TEXTE FEAT */
#blocmasterfeatriot {
/* margin-top: 100px; */
margin-left:-20px;
padding: 20px;
padding-top: 90px;
width: 100%;
/* border: 1px solid #000000; */
}
/* TEXTE FEAT */
#masterfeatriot {
font-family: 'Indie Flower', cursive;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
padding: 30px;
text-align: center;
color: #FFC0EB;
text-shadow: 1px 1px  2px #3F002B;
}

#mastertitreriot {
font-family: 'Indie Flower', cursive;
font-size: 50px;
font-weight: bold;
line-height: 1.2;
text-align: right;
padding-right: 25px;
/* padding: 50px; */
color: #FFC0EB;
text-shadow: 1px 1px  2px #3F002B;
/* color: #FF84B4; pour l ombrage */
}

#contdialogueriot {
width: 550px;
margin-left: -54px;
border: 2px solid #FF84B4;
background-image: url("images/dialogue_pink.png");
background-position: left center;
background-repeat: repeat-y;
background-color: rgba(243, 211, 224, 1); /* = #F3D3E0 */
/* -moz-box-shadow: -3px -3px 2px #FFC0EB;
-webkit-box-shadow: -3px -3px 2px #FFC0EB; */
box-shadow:
inset 3px 3px 10px #3F002B, /* ombrage */
3px 3px 10px #FFC0EB; /* lumiere */
-moz-border-radius: 25px 0px 0px 25px;
-webkit-border-radius: 25px 0px 0px 25px;
border-radius: 25px 0px 0px 25px;
}

#contpenseeriot {
width: 550px;
margin-left: 40px;
border: 2px solid #FF84B4; /* rose soutenu : #B70308 */
padding: 6px;
background-image: url("images/think_pink.png");
background-position: right center;
background-repeat: repeat-y;
/* background-color: #F3D3E0; */
background-color: rgba(243, 211, 224, 1); /* = #F3D3E0 */
box-shadow: inset 3px 3px 10px #3F002B, /* ombrage */
3px 3px 10px #FFC0EB;
-moz-border-radius: 0px 25px 25px 0px;
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}

p.texteriot {
font-style: normal;
font-family: 'Sacramento', cursive;
font-size: 25px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #3F002B;
}

p.dialogueriot {
font-weight: bold;
font-family: 'Sacramento', cursive;
font-size: 25px;
line-height: 1.4;
text-align: justify;
padding: 12px;
margin-left: 67px;
color: #3F002B;
}

p.penseeriot {
font-weight: bold;
font-style: italic;
font-family: 'Sacramento', cursive;
font-size: 25px;
line-height: 1.4;
text-align: justify;
padding: 12px;
margin-right: 67px;
color: #3F002B;
}


p.sacramento {
font-family: 'Sacramento', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #3F002B;
}

p.mark {
font-family: 'Marck Script', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

p.patrick {
font-family: 'Patrick Hand', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

p.fredericka {
font-family: 'Fredericka the Great', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

p.reenie {
font-family: 'Reenie Beanie', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

p.kids {
font-family: 'Butterfly Kids', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

p.flower {
font-family: 'Indie Flower', cursive;
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

p.overflowing {
font-family: 'overflowing';
font-size: 25px;
font-weight: bold;
line-height: 1.4;
text-align: justify;
color: #FFC0EB;
}

/* BLOCK FOOTER LIENS  */
#masterfooterriot{
width: 610px;
margin: 0 auto;
margin-top: 10px;
border: 2px solid #FF84B4;
/* padding: 4px; */
background-color: #5D5D5D;
/* box-shadow: 2px 2px 5px #5D5D5D; */
box-shadow:
3px 3px 10px #3F002B, /* ombrage */
-3px -3px 10px #FFC0EB, /* lumiere */
inset 0px 0px 5px #3F002B;
}

#globalfooterriot{
width: 590px;
border: 1px solid #FF84B4;
margin: 0 auto;
background-color: #BBB3B3;
background-image: url("images/pavement_raccordable.jpg");
background-size: cover;
background-position: 0px 0px;
background-origin: border-box;
background-repeat: repeat-y;
}

#contfooterriot {
width: 550px;
margin: 0 auto;
text-align: justify;
/* margin-top: 100px; */
/* background-color: rgba(140, 140, 140, 0.8); */
background-color: rgba(255, 192, 235, 0.7);
border: 1px solid #FF84B4;
box-shadow: inset 0 0 5px #3F002B;
-moz-border-radius: 0px 25px 25px 0px;
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}

/* STYLE LIENS */
 /* unvisited link */
a#riot:link {
font-style: normal;
font-family: 'Sacramento', cursive;
font-size: 17px;
font-weight: bold;
color: #3F002B;
padding: 15px;
}

/* visited link */
a#riot:visited {
font-style: normal;
font-family: 'Sacramento', cursive;
font-size: 17px;
font-weight: bold;
color: #3F002B;
padding: 15px;
}

/* mouse over link */
a#riot:hover {
font-style: normal;
font-family: 'Sacramento', cursive;
font-size: 17px;
font-weight: bold;
color: #FFC0EB;
padding: 15px;
}

/* selected link */
a#riot:active {
font-style: normal;
font-family: 'Sacramento', cursive;
font-size: 17px;
font-weight: bold;
color: #3F002B;
padding: 15px;
}

/* font dispo
font-family: 'Sacramento', cursive;
font-family: 'Marck Script', cursive;
font-family: 'Patrick Hand', cursive;
font-family: 'Fredericka the Great', cursive;
font-family: 'Reenie Beanie', cursive;
font-family: 'Butterfly Kids', cursive;
font-family: 'Indie Flower', cursive;
*/



.htaccess@font-face : configurer apache directive.
Code:

# Configuration de type MIME pour les polices
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf          ttf ttc
AddType font/opentype                   otf
AddType application/x-font-woff        woff


Dernière édition par Ai Enma le Dim 8 Juil - 0:36, édité 7 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Ven 29 Juin - 0:04

CODE ALEXEI > modif ai enma. TERMINE.

NOM
Prénom

NOM
Prénom

Un titre qui claque !

Font: Cookie, size: 25px, couleur: #F252F7;  line-height: 1.1 orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

C'est par ici que ça cause....police ....25px mauve line-height: 1.1


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

C'est par ici que ça pense.... police sans gras 25px en italic, line-height: 1.1 double ombrage


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


HTML
Code:

<link href="https://fonts.googleapis.com/css?family=Asap|Cookie" rel="stylesheet">
<link href="https://www.aht.li/3118743/YPL_RP.css" rel="stylesheet" type="text/css">
<!-- COULEURS PERSONNALISABLES --><div class="YPL"><!-- BORDURES BANNIERE --><div class="bannYPL" style="border-color:#1D222C;">
<!-- FT --><div id="ftYPL"><!-- PERSONNAGE --><div class="ftYPL"><!-- IMAGE 100*100 --><img src="https://www.aht.li/2901991/100100BW.png" />
<!-- CONTENU --><p style="background:rgba(0,0,0,0.7); color:white; text-shadow:1px 0 1px rgba(0,0,0,0.1);">NOM<br/>Prénom</p></div><!-- PARTENAIRE --><div class="ftYPL">
<!-- IMAGE 100*100 --><img src="https://www.aht.li/2901991/100100BW.png" />
<!-- CONTENU -->
<p style="background:rgba(0,0,0,0.7); color:white; text-shadow:1px 0 1px rgba(0,0,0,0.1);">NOM<br/>Prénom</p></div></div><!-- BLOC TITRE --><div class="tleYPL"><!-- ALIGNEMENT --><span></span>
<!-- TITRE --><span style="color:white; text-shadow:0 0 5px rgba(0,0,0,0.7); font-family: 'Cookie', cursive; font-weight: bold; color: #F252F7;">Un titre qui claque !</span></div>
<!-- IMAGE 500*150 ET SES BORDURES --><img class="bgIYPL" style="border-color:#81383F;" src="https://www.aht.li/3117816/imgYPL.png" /><!-- CREDIT -->
<a class="cdtYPL" href="http://crushcrushcrush.actifforum.com" target="_blank"><img src="http://www.aht.li/2456212/PUF.png" /></a></div><!-- MESSAGE -->
<div class="msgYPL" style="background:#242A36; color:rgba(250,250,250,0.9); font-family: 'Cookie', cursive; font-weight: normal; font-size: 25px; color: #F252F7; line-height: 1.1;">

paragraphe 1

<div width="500px" style="margin-left: -50px; margin-top: 15px; padding: 0px; border: 1px solid #ffffff; box-shadow:inset -2px -1px 1px #242A36, -2px 1px 1px #242A36; border-radius: 25px 0px 0px 25px; background-image:url(https://i.pinimg.com/564x/02/d5/c9/02d5c9bb15f74a439fc170fb58c3d377.jpg); background-origin: border-box; background-position:left top; background-size: 100px 100px; background-repeat: no-repeat; background-color:#37496E; min-height:100px;">
<p style="font-family: 'Cookie', cursive; font-size: 25px; color: #00ffff; line-height: 1.1; padding-left:110px; text-align: justify; margin-top: 0px; margin-right: 10px;">
Dialogue
</p>
</div>

paragraphe 2


<div width="500px" style="margin-right: -50px; margin-top: 15px; padding: 0px; border: 1px solid #ffffff; box-shadow: inset 2px 1px 1px #242A36, 2px 1px 1px #242A36; border-radius: 0px 25px 25px 0px; background-color:#242A36; background:url(https://i.pinimg.com/564x/02/d5/c9/02d5c9bb15f74a439fc170fb58c3d377.jpg); background-origin: border-box; background-position:right top; background-size: 100px 100px; background-repeat: no-repeat; background-color:#37496E; min-height:100px;">
<p style="font-family: 'Cookie', cursive; font-size: 25px; color: #00ffff; line-height: 1.1; padding-right:110px; text-align: justify; margin-top: 0px; margin-left: 10px;">
Pensées
</p></div>

paragraphe 3

</div>
</div>



CSS
Code:

.YPL {
margin:auto; width:500px; line-height:normal;
}
.bannYPL {
border-top:5px solid; border-bottom:5px solid;
}
#ftYPL {
position:absolute; z-index:2; margin-top:25px; margin-left:120px;
width:260px; height:100px; text-align:left;
opacity:0; transition:opacity 1s ease; -webkit-transition:opacity 1s ease; transition-delay:0s; -webkit-transition-delay:0s;
}
.bannYPL:hover #ftYPL {
opacity:1; transition-delay:0.75s; -webkit-transition-delay:0.75s;
}
.ftYPL {
display:inline-block; vertical-align:middle; margin-left:20px;
height:100px; width:100px;
}
.ftYPL p{
position:relative; z-index:5; margin-top:-100px;
width:90px; height:65px; padding:35px 5px 0; overflow:hidden; border-radius:100px;
text-align:center; font-size:12px; font-family:Arial;
opacity:0; transition:opacity 0.55s; -webkit-transition:opacity 0.55s;
}
#ftYPL:hover .ftYPL p{
opacity:1;
}
.ftYPL img {
position:relative; z-index:4;
width:100px !important; height:100px !important; border-radius:100px;
opacity:1; transition:all 0.65s linear; -webkit-transition:all 0.65s linear;
}
.tleYPL {
position:absolute; z-index:4; margin-top:10px; margin-left:15px;
width:455px; height:125px; padding:5px; overflow:hidden;
font-size:28px; text-transform:uppercase; text-align:center; font-family:Asap; line-height:26px;
transform:rotate(0) scale(1); -webkit-transform:rotate(0) scale(1); transition:all 0.65s ease; -webkit-transition:all 0.65s ease; transition-delay:0.85s; -webkit-transition-delay:0.85s;
}
.bannYPL:hover .tleYPL {
height:0; opacity:0; transform:rotate(-5deg) scale(0.5); -webkit-transform:rotate(-5deg) scale(0.5); transition-delay:0s; -webkit-transition-delay:0s;
}
.tleYPL span:nth-of-type(1) {
height:125px;
}
.tleYPL span {
display:inline-block; vertical-align:middle;
}
.bgIYPL {
width:500px; height:150px; border-top:2px solid; border-bottom:2px solid;
transition:all 0.65s ease; -webkit-transition:all 0.65s ease;
}
.bannYPL:hover .bgIYPL {
opacity:0.8; filter:grayscale(0.3); -webkit-filter:grayscale(0.3);
}
.msgYPL {
padding:20px 35px 30px 35px; border-radius:0 0 75px 75px;
text-align:justify; font-size:11px; font-family:Arial; line-height:16px;
}
.cdtYPL {
position:absolute; z-index:5; margin-left:-15px; margin-top:45px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.75s; -webkit-transition:-webkit-transform ease-in-out 0.75s;
}
.YPL:hover .cdtYPL {
transform:scale(1); -webkit-transform:scale(1);
}


Dernière édition par Ai Enma le Dim 8 Juil - 16:22, édité 56 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Lun 2 Juil - 16:12

WORK IN PROGRESS. THEME SPYRO 0.1 ai enma.











Un titre de fou et qui va claquer sur deux lignes.


Le même titre sans effet.


Le même titre.


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.



Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.



Dialogue de spyro, qui n'arrête pas de causer ! Dialogue de spyro, qui n'arrête pas de causer ! Dialogue de spyro, qui n'arrête pas de causer ! Dialogue de spyro, qui n'arrête pas de causer !



Dialogue avec effet de spyro, qui n'arrête pas de causer ! Dialogue de spyro, qui n'arrête pas de causer ! Dialogue de spyro, qui n'arrête pas de causer ! Dialogue de spyro, qui n'arrête pas de causer !



Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


Dialogue de sparx qui n'arrête pas de causer !  Dialogue de sparx qui n'arrête pas de causer ! Dialogue de sparx qui n'arrête pas de causer ! Dialogue de sparx qui n'arrête pas de causer !



Dialogue de sparx avec effets qui n'arrête pas de causer ! Dialogue de sparx qui n'arrête pas de causer ! Dialogue de sparx qui n'arrête pas de causer ! Dialogue de sparx qui n'arrête pas de causer !



Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.


Dialogue du famélique familier qui n'arrête pas de causer lui aussi ! Dialogue du famélique familier qui n'arrête pas de causer lui aussi ! Dialogue du famélique familier qui n'arrête pas de causer lui aussi !



Dialogue du famélique familier qui n'arrête pas de causer lui aussi ! Dialogue du famélique familier qui n'arrête pas de causer lui aussi ! Dialogue du famélique familier qui n'arrête pas de causer lui aussi !



Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.






Texte.





Dialogue de spyro





Dialogue de sparx





Dialogue du familier
















HTML

Code:


<link rel="stylesheet" type="text/css" href="http://www.ellynn.fr/externe/themes/theme_spyro/spyro.css" />
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Josefin+Slab" rel="stylesheet">
<div id="masterrepspy">
<div id="masterblocspy">
<div id="decospy">
<div id="contentspy">

<div id="contenttitre"><p id="titrespyro">Titre</p></div>

<div id="contenttextefx">
<p id="textespyro">Texte.</p>
</div>

<div id="contenttextefx">
<p id="dialoguespyro">Dialogue de spyro</p>
</div>

<div id="contenttextefx">
<p id="dialoguesparx">Dialogue de sparx</p>
</div>

<div id="contenttextefx">
<p id="dialoguefamil">Dialogue du familier</p>
</div>

</div>
</div>
</div>
</div>


CSS

Code:

/* CSS SPYRO by ai enma 07/07/18 */
/*
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Josefin+Slab');
*/

/* BLOCK REPETITON BG */
#masterrepspy {
width: 610px;
margin: 0 auto;
border: 2px solid #2A0341;
background-image: url("images/non_raccord610.png");
/* background-origin: content-box; */
background-position: 0 0, center;
background-repeat: repeat;
box-shadow: 2px 2px 5px #000000;
min-height: 926px;
/* position: relative; */
/* z-index: 1; */
}

/* BLOCK HAUT BAS BG */
#masterblocspy {
width: 610px;
margin: 0 auto;
margin-top: -38px;
margin-bottom: -42px;
/* border: 1px solid #FFFFFF; */
/* margin-top: 50px; */
/* border: 2px solid #FF84B4; */

background-image: url("images/background_haut610.png"), url("images/background_bas610.png");
background-size:  610px 391px , 610px 369px;
/* background-origin: content-box; */
background-position: left top, left bottom;
background-repeat: no-repeat;

min-height: 926px;

border: 2px solid #2A0341;
box-shadow: 3px 3px 7px #000000;
/* position: relative; */
/* z-index: 2; */
}

/* CADRE DECORATION */
#decospy {
width: 610px;
margin: 0 auto;
margin-top: -38px;
margin-bottom: -42px;
background-image: url("images/deco_haut610.png"), url("images/deco_bas610.png");
/* background-size:  610px 476px , 610px 450px; */
/* background-origin: content-box; */
background-position: left top, left bottom;
background-repeat: no-repeat;

min-height: 926px;
/* position: relative; */
/* z-index: 4; */
}

#contentspy {
width: 480px;
margin: 0 auto;
margin-top: 120px;
margin-bottom: 130px;
/* border: 1px solid #FFFFFF; */

}

#contenttitre {
margin: 0 auto;
margin-top: -50px;
}

#contentdialspy {
width: 475px;
border: 1px solid #BF2FC0; /* violet fonce : #BF2FC0 */
background-color: rgba(14, 0, 29, 0.6); /* violet fonce = 41.0.43/0.7 = #1B0057 */
box-shadow: inset 3px 3px 3px #000000, 3px 3px 3px #0E001D;
/* 1= clair 2=fonce */
}

#contentdialsparx {
width: 475px;
border: 1px solid #FD9D00; /* jaune = 253.157.0 #FD9D00; */
background-color: rgba(14, 0, 29, 0.6);
box-shadow: inset 3px 3px 3px #000000, 3px 3px 3px #0E001D;
/* 1= clair 2=fonce */
}

#contentdialfam {
width: 475px;
border: 1px solid #C1021D;
background-color: rgba(14, 0, 29, 0.6);
box-shadow: inset 3px 3px 3px #000000, 3px 3px 3px #0E001D;
/* 1= clair 2=fonce */
}

#contenttextefx {
width: 475px;
background-color: rgba(23, 9, 32, 0.7); /* gba(42, 3, 65, 0.5) = #2A0341 */
border-radius: 25px 25px 0px 25px;
box-shadow: -3px -3px 3px #470174, 3px 3px 3px #0E001D;
}

#titrespyro {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 35px;
font-weight: normal;
line-height: 1.4;
text-align: center;
padding: 10px;
color: #C1021D;
text-shadow: 1px 1px  1px #F986FF, -1px -1px 2px #000000; /* clair origine: #F200FF*/
}

#titrespyronone {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 35px;
font-weight: normal;
line-height: 1.4;
text-align: center;
padding: 10px;
color: #C1021D;
}

#titrespyrofx {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 55px;
font-weight: normal;
line-height: 1.4;
text-align: center;
padding: 10px;
color: #C1021D;
/* background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FF000D));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
text-shadow: 1px 1px  2px #6F0207, -2px -2px 2px #000000; /* clair origine: #F200FF*/
}

#textespyro {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #FFFFFF;
}

#dialoguespyro {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #BF2FC0;
}

#dialoguespyrofx {
/* padding-top: 0px; no */
/* padding-bottom: 0px; no */
margin-top: 0;
margin-bottom: 0;
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #BF2FC0;
}


#dialoguesparx {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #FD9D00;
}

#dialoguesparxfx {
/* padding-top: 0px; no */
/* padding-bottom: 0px; no */
margin-top: 0;
margin-bottom: 0;
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #FD9D00;
}

#dialoguefamil {
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #C1021D;
}

#dialoguefamfx {
/* padding-top: 0px; no */
/* padding-bottom: 0px; no */
margin-top: 0;
margin-bottom: 0;
font-style: normal;
font-family: 'IM Fell English SC', serif;
font-size: 20px;
font-weight: normal;
line-height: 1.4;
text-align: justify;
padding: 10px;
color: #C1021D;
}
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Sam 29 Sep - 22:03


   
   

   

   

   

   

   
   

   
   Recroquevillée
   

   
   


   
*** à l'intérieur ***
   
   [color=#ffffff][size=14][b]
   J'étais assise... les genoux tirés contre moi par mes bras, la tête posée dessus, et l'eau de mes larmes ruisselant jusqu'au sol. J'avais totalement laissé le contrôle à Aïko, et j'en étais arrivée à un temps où je ne m'occupais plus de ce qui se passait dehors. Je ressentais un immense besoin de liberté, d'évacuation de toutes ces ondes négatives que j'avais accumulé. Et paradoxalement, laisser la place au démon qui sommeillait en moi ne faisait que me soulager. Il était dangereux, cruel et menaçant envers Nagato mais pour l'instant, cela ne me gênait pas. Rien ne remplaçait l'envolée réconfortante de toute cette frustration, cette souffrance.

 
   

   

   
   


Dernière édition par Ai Enma le Lun 19 Nov - 22:59, édité 2 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Lun 19 Nov - 22:00



C'EST NOEL ! THEME SNOW en test.... (et bien moins complexe à réaliser qu'une FT...  drunken  )







Revoir le DIV ai01 relative/absolute...
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Mar 20 Nov - 2:50



THEME BULLET IN MY HEAD en test... BETA 1.2












anim bullet: DELAY non fonctionel.. PAUSE TIMESETOUT
anim blood head:  DELAY non fonctionel..
anim blood hand: DELAY 15s, non fonctionel...

Code:

@keyframes fadeInHead {
0%{ opacity: 0; }
89%{ opacity: 0; }
90%{ opacity: 1; }
100% { opacity: 1; }
}
.fadeInHead {
 position : absolute;
 top: 0; right: 0; bottom: 0;  left: 0;
 background : url("images/head_full.png") no-repeat;
 width: 600px;
 height: 389px;
  -webkit-animation-name: fadeInHead;
  animation-name: fadeInHead;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}


Dernière édition par Ai Enma le Jeu 22 Nov - 10:28, édité 1 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Jeu 22 Nov - 9:52

THEME NOBIO 1.0


Titre
Sous Titre

NOM Prénom & NOM Prénom

TEXTE RP !
Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem

Nobio n'a pas grand chose à dire....

SUITE TEXTE RP !
Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem

Le pnj reste sans voix devant l'élocution de  Nobio...

SUITE et FIN TEXTE RP !
Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Nobio n'a pas grand chose à dire....

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem

Là Nobio a beaucoup de choses à dire. Pour la syntaxe et des exemples de types de valeur applicables aux propriétés de police et de ligne, voir la section consacrée à la propriété en question. Si vous insérez une barre oblique avant la valeur "hauteur de ligne", vous pouvez utiliser une seconde valeur de longueur dans une séquence de valeurs susceptible d'atteindre une certaine longueur de valeurs pour cette propriété: la valeur "hauteur de ligne" doit toujours accompagner la valeur font-size requise, séparée par une barre oblique. Merci Nobio pour cette explication !

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Le pnj reste sans voix devant l'élocution de  Nobio...

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem

Là Nobio a beaucoup de choses à dire. Pour la syntaxe et des exemples de types de valeur applicables aux propriétés de police et de ligne, voir la section consacrée à la propriété en question. Si vous insérez une barre oblique avant la valeur "hauteur de ligne", vous pouvez utiliser une seconde valeur de longueur dans une séquence de valeurs susceptible d'atteindre une certaine longueur de valeurs pour cette propriété: la valeur "hauteur de ligne" doit toujours accompagner la valeur font-size requise, séparée par une barre oblique. Merci Nobio pour cette explication !



TEST LIENS:





COULEURS:

Titre:                 #F7FF2D;  (jaune clair)
Dialogue Nobio: #FFB72D;  (jaune moyen)

FICHIER CSS ORIGINAL.
Code:

.THROW {
margin:auto;
width:500px; padding:20px 0; line-height:16px;
box-shadow:0 0 10px rgba(0,0,0,0);
}
.tleTHROW {
margin:auto;
width:450px; padding:10px 5px;
text-align:center; text-transform:uppercase; font-size:24px; font-family:Raleway; line-height:24px;
}
/* FT */
.ftTHROW {
margin:15px auto; width:500px; height:150px; overflow:hidden; text-align:center;
}
.ftTHROW img{
width:500px; height:150px;
}
.ftTHROW:hover img {
filter:grayscale(1); -webkit-filter:grayscale(1);
}
.ftTHROW p{
position:absolute; margin-top:-150px;
width:500px; height:90px; padding-top:60px; font-family:Raleway; font-size:16px; text-align:center;
opacity:0; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;
}
.ftTHROW:hover p{
opacity:1;
}
.msgTHROW {
margin:auto;
width:440px; padding:10px;
font-size:11px; text-align:justify; font-family:Calibri;
}
/* DIALOGUE GAUCHE */
.UITHROW {
margin:5px 0 5px -45px;
width:455px; padding:10px 10px 10px 20px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.UITHROW::before {
content:''; position:absolute; margin-top:-25px; margin-left:-20px;
width:0; height:0; border-style:solid; border-width:0 0 15px 15px; border-color:transparent; border-bottom-color:black;
}
/* DIALOGUE DROITE */
.UIITHROW {
margin:5px 0;
width:455px; padding:10px 20px 10px 10px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.UIITHROW::before {
content:''; position:absolute; margin-top:-25px; margin-left:460px;
width:0; height:0; border-style:solid; border-width:15px 0 0 15px; border-color:transparent; border-left-color:black;
}
.cdtTHROW {
position:absolute; z-index:3; margin-left:485px; margin-top:85px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.75s; -webkit-transition:-webkit-transform ease-in-out 0.75s;
}
.THROW:hover .cdtTHROW {
transform:scale(1); -webkit-transform:scale(1);
}


FICHIER CSS MODIFIE
Code:

.THROW {
margin:auto;
width:500px; padding:20px 0; line-height:16px;
box-shadow:0 0 10px rgba(0,0,0,0);
background: linear-gradient(to bottom, rgba(72,67,59,1) 0%, rgba(72,67,59,1) 25%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(72,67,59,1) 75%);
background: -webkit-linear-gradient(to bottom, rgba(72,67,59,1) 0%, rgba(72,67,59,1) 25%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(72,67,59,1) 75%);
background: -mozlinear-gradient(to bottom, rgba(72,67,59,1) 0%, rgba(72,67,59,1) 25%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(72,67,59,1) 75%);
background: -ms-linear-gradient(to bottom, rgba(72,67,59,1) 0%, rgba(72,67,59,1) 25%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(72,67,59,1) 75%);
background: -olinear-gradient(to bottom, rgba(72,67,59,1) 0%, rgba(72,67,59,1) 25%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(141,141,141,1) 50%, rgba(72,67,59,1) 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48433b', endColorstr='#48433b',GradientType=0 ); /* IE6-9 */
}
.titreRp {
margin:auto;
width:450px; padding:10px 5px;
color: #FFCD00;
background: #212121;
text-align:center; text-transform:uppercase; font-size:26px; font-family:Raleway; font-weight: bolder; line-height:24px;
text-shadow: 0px 0px 5px rgba(255,75,3, 1);
}
.sousTitreRp {
margin:auto;
width:450px; padding:10px 5px;
color: #FFCD00;
background: #212121;
text-align:center; font-size:17px; font-family:Raleway; font-weight: bolder; line-height:24px;
text-shadow: 0px 0px 5px rgba(255,75,3, 1);
}

/* FT */
.ftTHROW {
margin:15px auto; width:500px; height:150px; overflow:hidden; text-align:center;
}
/* IMAGE TOP */
.ftTHROW img{
width:500px;
height:150px;
background-size: 100% 100%; /* cover no */
}
.ftTHROW:hover img {
filter:grayscale(1); -webkit-filter:grayscale(1);
}
.ftTHROW p{
position:absolute; margin-top:-150px;
width:500px; height:90px; padding-top:60px; font-family:Raleway; font-size:16px; text-align:center;
color: #FFCD00; /* COULEUR APPARITION §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
opacity:0; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;
}
.ftTHROW:hover p{
opacity:1;
}

.cdtTHROW {
position:absolute; z-index:3; margin-left:485px; margin-top:85px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.75s; -webkit-transition:-webkit-transform ease-in-out 0.75s;
}
.THROW:hover .cdtTHROW {
transform:scale(1); -webkit-transform:scale(1);
}

/* ######################## TEXTE RP NOBIO ######################## */
.texteRp {
margin:auto;
width:440px; padding:10px;
font-size:11px; text-align:justify; font-family:Calibri;
color: #000000;
background-color: rgba(204,204,203, 0.9);
}

/* ######################## BLOCK DIALOGUE NOBIO ######################## */
/*ombre triangle gauche */
.triangleOmbre-left {
margin-top: -13px;
margin-left: -47px;
width: 0;
height: 0;
border-bottom: 17px solid #000000;
border-left: 17px solid transparent;
}
/* conteneur dialogue NOBIO */
.contentDialNobio {
/* margin: 0; */
margin-top: -11px;
margin-left: -47px;
margin-bottom: 10px;
/* padding: 10px; */
width: 488px;
/* min-height: 60px; */
/* height: 50px; */
background: #212121;
background-image: linear-gradient(to right, rgba(255,255,255,0) 80%, rgba(96,90,79,0.6));
}


/* STYLE FONT DIALOGUE NOBIO */
/* style | variant | weight | size/line-height | family */
.dialNobio {
font: italic 12px Raleway;
line-height: 1.8em;
color: #FFB72D;
padding-left: 22px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}

.dialBoldNobio {
font: normal bold 12px Raleway;
line-height: 1.8em;
color: #FFB72D;
padding-left: 22px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
/* TEST DIAL NOBIO IMAGE */
.testdialNobio {
font: italic 12px Raleway;
font-weight: bolder;
line-height: 1.8em;
color: #FFB72D;
padding-left: 22px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}

.element{
 shape-outside: circle(50%);
   shape-outside: url(http://www.ellynn.fr/externe/themes/theme_nobio/image_bottom.png);
   shape-image-threshold: 0.7;
  -webkit-shape-outside: circle(50%);
  -webkit-shape-outside: url(http://www.ellynn.fr/externe/themes/theme_nobio/image_bottom.png);
  -webkit-shape-image-threshold: 0.7;
  float: right;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
}


/* ######################## BLOCK DIALOGUE PNJ ######################## */
/*ombre triangle droit */
.triangleOmbre-right {
margin-top: -13px;
margin-left: 470px;
width: 0;
height: 0;
border-bottom: 17px solid #000000;
border-right: 17px solid transparent;
}
/* conteneur dialogue PNJ */
.contentDialPnj {
/* margin: 0; */
margin-top: -11px;
margin-right: -47px;
margin-bottom: 10px;
width: 488px;
/* height: 50px; */
background: #8D8D8D;
background-image: linear-gradient(to left, rgba(255,255,255, 0) 80%, rgba(199,197,196, 0.7));
}
/* STYLE FONT DIALOGUE PNJ */
/* style | variant | weight | size/line-height | family */
.dialPnj {
font: normal 12px Raleway;
color: #5E2705;
padding-right: 22px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
}

.dialBoldPnj {
font: normal Bolder 12px Raleway;
color: #5E2705;
padding-right: 22px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
}


CODE HTML A COPIER:
Code:

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://www.ellynn.fr/externe/themes/theme_nobio/nobio.css" /><div class="THROW""><div class="titreRp">Titre</div><div class="sousTitreRp">Sous Titre</div><div class="ftTHROW"><img src="http://www.ellynn.fr/externe/themes/theme_nobio/image_top.jpg" />
<p style="background:rgba(0,0,0,0.9); color:white;">NOM Prénom & NOM Prénom</p></div>

<div class="texteRp">
TEXTE RP !

<!-- DIALOGUE GAUCHE --><div class="triangleOmbre-left"></div>
<div class="contentDialNobio"><p class="dialNobio">Nobio n'a pas grand chose à dire....</p></div>

SUITE TEXTE RP !

<!-- DIALOGUE DROITE --><div class="triangleOmbre-right"></div>
<div class="contentDialPnj"><p class="dialBoldPnj">Le pnj reste sans voix devant l'élocution de  Nobio...</p></div>

SUITE et FIN TEXTE RP !

<img src="http://www.ellynn.fr/externe/themes/theme_nobio/image_bottom.png" width="75px" height="75px" style="margin-left: 45%;" /></div></div></div>


Dernière édition par Ai Enma le Mer 5 Déc - 21:37, édité 4 fois
Revenir en haut Aller en bas
Messages : 126
Yens : 466
Date d'inscription : 21/02/2018
Localisation : au dessus de ton âme...

Progression
Niveau: 8
Nombre de topic terminé: 2
Exp:
5/6  (5/6)
avatar
Ai Enma ¤ Inconnue ¤

-



MessageSujet: Re: Mon bac à CSS !   Mer 28 Nov - 6:51




THEME NOBIO 02.




Un Titre Great Vibes qui se place sur deux lignes.


Un Sous Titre Parisienne




Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Bon ben c'est ici que Nobio cause !


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Bon ben c'est ici que Nobio cause ! Sur plusieurs lignes... Encore et encore. Toujours plus de lignes. Sur plusieurs lignes... Encore et encore. Toujours plus de lignes. Sur plusieurs lignes... Encore et encore. Toujours plus de lignes. Sur plusieurs lignes... Encore et encore. Toujours plus de lignes.


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Bon ben c'est ici que Nobio pense !


Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

Bon ben c'est ici que le PNJ cause !



Vec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.

deco pied de page nobio







Code:

/* CSS THEME_DARK NOBIO02 by AI ENMA 28/11/18 pour Nobio */


Revenir en haut Aller en bas
Contenu sponsorisé

-



MessageSujet: Re: Mon bac à CSS !   

Revenir en haut Aller en bas
Mon bac à CSS !
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Manga Multiverse ::  :: Graphisme :: Commandes-


Crédits : Design : Phoenix & Pingouin Règlements & Contexte : Phoenix
Forum optimisé pour Google Chrome.