Teafű: Bloggolási tippek

Sziasztok!

Folytatom is ezt a sorozatot, ezúttal a kódokkal. Ezek nem a sajátjaim lesznek.
Igyekszem a legjobb kódokat hozni.

Ha érdekel a bejegyzés, kattints a nyílra!

1. Forrás: Kawaii Blog Design

SZÖVEG SZÖVEG SZÖVEG
blablablablablablablablablabblablablabla
blablablatutyimutyi
xoxo Stacey S.
Linket is elhelyezhetsz, ha szeretnél.

.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;}

.ch-info-wrap{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

top: 20px;
 left: 20px;
 background: #ccc;
 box-shadow:
  0 0 0 20px rgba(255,255,255,0.2),
  inset 0 0 3px rgba(115,114, 23, 0.8);}

.ch-info{
 position: absolute;
 width: 280px;
 height: 280px;
 border-radius: 50%;

-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;}

.ch-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;

-webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 backface-visibility: hidden;}

.ch-info .ch-info-back {
 -webkit-transform: rotate3d(0,1,0,180deg);
 -moz-transform: rotate3d(0,1,0,180deg);
 -o-transform: rotate3d(0,1,0,180deg);
 -ms-transform: rotate3d(0,1,0,180deg);
 transform: rotate3d(0,1,0,180deg);
 background: #fff; }
 
.ch-img-1 { background-image: url(http://www.popularphotographybiz.com/wp-content/uploads/2014/02/vintage-photography-tumblr-themesshare-your-smile-with-everyone-t8jln1ti.jpg);background-size:510px;}

.ch-item:hover .ch-info-wrap {
 box-shadow:
  0 0 0 0 rgba(255,255,255,0.8),
  inset 0 0 3px rgba(115,114, 23, 0.8);}

.ch-item:hover .ch-info {
 -webkit-transform: rotate3d(0,1,0,-180deg);
 -moz-transform: rotate3d(0,1,0,-180deg);
 -o-transform: rotate3d(0,1,0,-180deg);
 -ms-transform: rotate3d(0,1,0,-180deg);
 transform: rotate3d(0,1,0,-180deg);}

.ch-grid {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;}

.ch-grid:after,
.ch-item:before {
 content: '';
    display: table;}

.ch-grid:after {
 clear: both;}

.ch-grid li {
 width: 320px;
 height: 320px;
 display: inline-block;
 margin: 20px;}

</style>

<br />
<center>
<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
<br />
<br />
Ide írhatod a szöveget!<br />
Ide bármit írhatsz ami neked tetszik. Bemutatkozás, kérés akármi <br />
Érezd jól magad és ha kérdésed lenne bátran fordulj hozzám! <br />
XXStacey. S.
<br />
<a href="http://link.com/" target="_blank">Linket </a> is elhelyezhetsz, ha szeretnél.
</div>
</div>
</div>
</div>
</li>
</ul>
</center>

2. Forrás: Criticism Blog Design

Főoldal Szereplők

a.gyuu { /* 2. és 4. menüpont */
display:block;
border: 1px solid #d72e2e;
width:100px;
padding:3px;
padding-bottom: 8px;
margin:30px;
background:#fff;
font-size:11px;
Font-Family: tahoma;
text-align:center;
Text-decoration:none;
color:#888;
text-transform:uppercase;letter-spacing:1px;
height:10px;
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
transform: rotate(-13deg);
-webkit-transition:All 0.5s ease ;
-moz-transition:All 0.54s ease ;
-o-transition:All 0.5s ease ;
}
a.gyuu:hover{
color:#000000;
} </style>
<center>
<a class="sung" href="Link">Főoldal</a><a class="gyuu" href="LINK">Szereplők</a>

Ha pedig a menü színét, nagyságát szeretnéd megváltoztatni, a Criticism Blog Design ezt is leírja nektek.

3. Forrás: Criticism Blog Design