|
|
|
|
← Takaisin
Css-koodit
Ohjeet koodien lisäämiseen:
1. Kopioi koodi.
2. Mene ensin yleiset asetukset --> ulkoasu ja varmista, että aivan viimeisenä olevassa "Tarkistetaanko muokattujen tyylitiedostojen olemassaoloa?:" -kohdassa on valittuna vaihtoehto kyllä.
3. Seuraavaksi mene grafiikka --> Css-tyylien lisäys ja liitä koodi avautuvaan tilaan. Paina sitten päivitä.
Huom. Copyihin täytyy laittaa sivujeni linkin lisäksi Google Fonts, sillä käytän kyseisen sivun fontteja kaikissa koodeissa!
Koodit
Klikkaamalla saat kuvan paremmin näkyville.
Koodi #1
/* css by lilian */
@import url('https://fonts.googleapis.com/css?family=Caveat|Kaushan+Script|Lemonada|Rancho');
a {
color: #d42a7d;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
a:hover {
color: #8c0748;
text-shadow: 1px 1px 1px #8c0748;
text-decoration: none;
}
h1 {
font-family: 'Lemonada';
font-size: 35px;
display: block;
padding: 4px;
color: #8c0044;
text-shadow: 0px -1px 1px #ff00a2, -1px 0px 1px #ff0089, 0px -2px 1px #ff70f8, -2px 0px 1px #ff70f8;
text-align: center;
margin-top: 3px;
margin-bottom: 5px;
font-weight: normal;
}
h2 {
font-family: 'Kaushan Script';
text-align: left;
color: #efc4ff;
text-shadow: 1px 1px 1px #ff00ae;
font-size: 20px;
margin-top: 4px;
margin-bottom: 4px;
padding: 8px 8px;
padding-left: 15px;
background: #7d003d;
border: 1px solid #bb0094;
border-radius: 0px 0px 20px 0px;
box-shadow: 0px 0px 5px #ff0093;
font-weight: normal;
}
h3 {
font-family: 'Rancho';
text-align: left;
color: #995a84;
text-shadow: 1px 1px 1px #e246b0;
font-size: 21px;
margin-top: 10px;
margin-bottom: 6px;
padding-left: 15px;
border-bottom: 1px dashed #995a84;
font-weight: normal;
}
b, strong {
font-weight: normal;
color: #7d003d;
text-shadow: 1px 1px 1px #a02770, 1px 1px 1px #ff8cf2;
}
.paalinkitactive b {
font-weight: normal;
color: inherit;
text-shadow: inherit;
}
.paalinkit b {
font-weight: normal;
color: inherit;
text-shadow: inherit;
}
.paalinkitactive:hover b {
color: inherit;
text-shadow: inherit;
}
u, underline {
color: #f40369;
text-shadow: 1px 1px 1px #af345b;
}
i, em {
color: #c72961;
text-shadow: 1px 1px 1px #ff00a4;
}
s, strike {
color: #dc98cf;
text-shadow: 0px 0px 1px #b700b9;
}
.paalinkit, paalinkit:visited {
font-family: 'Caveat';
font-size: 20px;
display: block;
padding: 3px;
padding-left: 8px;
color: #f6dcff;
background: rgb(109, 19, 80);
opacity: 0.7;
border: 1px solid #ff00ec;
border-radius: 0px 0px 20px 0px;
box-shadow: 0px 0px 5px #ff0093;
margin: 0px 5px 0px 0px;
text-align: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.paalinkit:hover {
font-family: 'Caveat';
font-size: 20px;
display: block;
padding: 3px;
padding-left: 12px;
color: #efc4ff;
background: #7d003d;
opacity: 1.0;
border: 1px solid #bb0094;
box-shadow: 0px 0px 5px #ff0093;
margin: 0px 5px 0px 0px;
text-align: left;
text-shadow: 0px -1px 1px #ff0073, -1px 0px 1px #ff007d, 0px 1px 1px #fff, 1px 0px 1px white;
}
.paalinkitactive, paalinkitactive:visited {
font-family: 'Caveat';
font-size: 20px;
display: block;
padding: 3px;
padding-left: 8px;
color: #efc4ff;
background: #7d003d;
border: 1px solid #bb0094;
border-radius: 0px 0px 20px 0px;
box-shadow: 0px 0px 5px #ff0093;
margin: 0px 5px 0px 0px;
text-align: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.paalinkitactive:hover {
font-family: 'Caveat';
font-size: 20px;
display: block;
padding: 3px;
padding-left: 12px;
color: #f6dcff;
background: rgb(109, 19, 80);
opacity: 0.7;
border: 1px solid #ff00ec;
box-shadow: 0px 0px 5px #ff0093;
margin: 0px 5px 0px 0px;
text-align: left;
text-shadow: 0px -1px 1px #ff0073, -1px 0px 1px #ff007d, 0px 1px 1px #fff, 1px 0px 1px white;
}
Koodi #2
/* css by lilian */
@import url('https://fonts.googleapis.com/css?family=Fondamento|Gabriela|Kurale|Yeon+Sung');
a {
color: #5d524d;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
a:hover {
color: #b7e59f;
text-shadow: 1px 0px 1px #b7e59f;
text-decoration: line-through;
text-decoration-color: #5d524d;
-webkit-text-decoration-color: #5d524d;
-moz-text-decoration-color: #5d524d;
}
h1 {
font-family: 'Yeon Sung', cursive;
font-size: 40px;
display: block;
padding: 4px;
color: #5d524d;
text-shadow: 1px 0px 1px #D9F9A5, 2px 1px 3px #b7e59f;
text-align: center;
margin-top: 3px;
margin-bottom: 5px;
font-weight: normal;
}
h2 {
font-family: 'Gabriela', serif;
text-align: center;
color: #D9F9A5;
text-shadow: 1px 1px 1px #567b19;
font-size: 18px;
margin-top: 8px;
padding: 6px;
background: #5d524d;
border: 1px solid #D9F9A5;
box-shadow: 0px 0px 5px #68534D;
font-weight: normal;}
h3 {
font-family: 'Fondamento', cursive;
text-align: left;
color: #5d524d;
text-shadow: 0px 0px 5px #cfec8b, 1px -1px 1px #b7e59f;
font-size: 18px;
padding-left: 10px;
line-height: 8px;
border-bottom: 8px solid #b7e59f;
font-weight: normal;
}
b, strong {
font-weight: normal;
color: #5d524d;
text-shadow: 1px 0px 1px #5d524d, 0px 0px 3px #D9F9A5;
}
.paalinkitactive b {
font-weight: normal;
color: inherit;
text-shadow: inherit;
}
.paalinkit b {
font-weight: normal;
color: inherit;
text-shadow: inherit;
}
.paalinkitactive:hover b {
color: inherit;
text-shadow: inherit;
}
u, underline {
color: #646e62;
text-shadow: 1px 1px 1px #b7e59f;
}
i, em {
color: #73855d;
text-shadow: 1px 1px 1px #80c437;
}
s, strike {
color: #b7e59f;
text-shadow: 0px 0px 1px #b7e59f;
}
.paalinkit, paalinkit:visited {
font-family: 'Kurale', serif;
font-size: 14px;
display: block;
padding: 3px;
padding-left: 8px;
color: #D9F9A5;
background: #81726A;
opacity: 0.7;
border: 1px solid #81726A;
box-shadow: 0px 0px 5px #68534D, 0px 0px 5px #F4FEC1 inset;
margin: 0px 5px 0px 0px;
text-align: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.paalinkit:hover {
font-family: 'Kurale', serif;
font-size: 14px;
display: block;
padding: 3px;
padding-left: 12px;
color: #D9F9A5;
background: #5d524d;
opacity: 1.0;
border: 1px solid #5d524d;
box-shadow: 0px 0px 5px #68534D, 0px 0px 5px #3c312f inset;
margin: 0px 5px 0px 0px;
text-align: left;
text-decoration: none;
text-shadow: 0px -1px 1px #D2D68D, -1px 0px 1px #D2D68D;
}
.paalinkitactive, paalinkitactive:visited {
font-family: 'Kurale', serif;
font-size: 14px;
display: block;
padding: 3px;
padding-left: 8px;
color: #D9F9A5;
background: #5d524d;
border: 1px solid #5d524d;
box-shadow: 0px 0px 5px #68534D, 0px 0px 5px #3c312f inset;
margin: 0px 5px 0px 0px;
text-align: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.paalinkitactive:hover {
font-family: 'Kurale', serif;
font-size: 14px;
display: block;
padding: 3px;
padding-left: 12px;
color: #D9F9A5;
background: #5d524d;
opacity: 0.7;
border: 1px solid #5d524d;
box-shadow: 0px 0px 5px #68534D, 0px 0px 5px #3c312f inset;
margin: 0px 5px 0px 0px;
text-align: left;
text-decoration: none;
text-shadow: 0px -1px 1px #D2D68D, -1px 0px 1px #D2D68D;
}
|
|
|
|