Navigare rapidă

Ultimele subiecte
» Criptare sursa html in cifre
Scris de nicutzy Ieri la 2:09
» Bine v-am gasit !
Scris de Andrei34 Mier 22 Mar - 15:19
» Cum retusam imaginile
Scris de razvan112 Vin 17 Mar - 15:00
Cuvinte-cheie

legenda  Statistici  Bara  banner  drop  punbb  navigare  avatar  subiecte  phpBB2  menu  cautare  Metin2  chenar  subforumuri  reclama  radio  html  Mesaje  profil  ultimele  meniu  tema  animate  edit  tutorial  

Un nou stil pentru categorii [BB3]


Hello, friends.
Am sa va prezint un cod foarte greu de realizat pentru uni, dar ceva foarte usor pentru alti.
Sa incepem:
Codul CSS:
CSS Style:
Cod:
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 700;
  src: local('Yanone Kaffeesatz Bold'), local('YanoneKaffeesatz-Bold'), url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/We_iSDqttE3etzfdfhuPRWwXwFHHZlCwprwJOQ-Se7k.woff) format('woff');
}

.grid_maintitle {
font-size: 24px;
font-family: "Trebuchet MS";
padding: 10px 0 20px 10px;
color: #333;
font-weight: 300;
text-shadow: #FFF 0px 1px 0px;
border: 0px;
margin: 0;
}

.grid_maintitle a, h4.idxForumName a {
color: #333;
}

.idxBlockWrap {
float: left;
width: 318px;
margin-left: 4px;
margin-right: 4px;
height: 368px;
}

.idxForumWrap {
padding-bottom: 50px;
}

.idxBlock {
background: #FFF;
border: 1px solid #DDD;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px;
-moz-box-shadow: rgba(0,0,0,0.1) 0px 1px 4px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px;
padding: 3px;
height: 352px;
position: relative;
}

h4.idxForumName {
font-size: 18px;
font-family: "Trebuchet MS";
padding: 10px;
color: #333;
line-height: 24px;
position: relative;
z-index: 300;
}

.idxBlockImage {
width: 310px;
height: 160px;
position: relative;
}

.no-csstransforms3d .view, .no-csstransitions .view {
overflow: hidden;
}

.view {
width: 310px;
height: 160px;
position: relative;
background: #333;
-webkit-box-shadow: inset #000 0px 0px 40px;
-moz-box-shadow: inset #000 0px 0px 40px;
box-shadow: inset #000 0px 0px 40px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
margin: 0 auto;
}

div.view-back {
width: 50%;
height: 100%;
padding-right: 10px;
position: absolute;
right: 0;
z-index: 0;
}

.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}

.no-csstransforms3d .view:hover img, .no-csstransitions .view:hover img, .view:hover img {
left: -85px;
}

.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}

a.idxClickForum {
display: block;
z-index: 200;
text-indent: -9999px;
outline: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.view-back>span:first-of-type {
padding-top: 30px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.view-back span, .view-back span.statText {
display: block;
padding-top: 20px;
text-align: right;
font-size: 16px;
color: #CCC;
font-family: "Trebuchet MS";
text-shadow: rgba(0, 0, 0, 0.7) 0px -1px 0px;
text-transform: uppercase;
}

.view-back span.statText {
font-size: 11px;
color: #777;
padding: 4px 0 0 0;
}

.view-back span, .view-back span.statText {
display: block;
padding-top: 20px;
text-align: right;
font-size: 16px;
color: #CCC;
font-family: "Trebuchet MS";
text-shadow: rgba(0, 0, 0, 0.7) 0px -1px 0px;
text-transform: uppercase;
}

.view-back span, .view-back span.statText {
display: block;
padding-top: 20px;
text-align: right;
font-size: 16px;
color: #CCC;
font-family: "Trebuchet MS";
text-shadow: rgba(0, 0, 0, 0.7) 0px -1px 0px;
text-transform: uppercase;
}

.view div.view-back {
width: 50%;
height: 100%;
padding-right: 10px;
position: absolute;
right: 0;
z-index: 0;
}

.view-back span, .view-back span.statText {
display: block;
padding-top: 20px;
text-align: right;
font-size: 16px;
color: #CCC;
font-family: "Trebuchet MS";
text-shadow: rgba(0, 0, 0, 0.7) 0px -1px 0px;
text-transform: uppercase;
}

.view-back span.statText {
font-size: 11px;
color: #777;
padding: 4px 0 0 0;
}

.idxLatestPost {
background: #FAFAFA url("http://i56.servimg.com/u/f56/18/54/25/61/idxlat10.png") repeat-x 0 0;
border-top: 1px solid #F1F1F1;
padding: 10px;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
}

.no-csstransforms3d .view, .no-csstransitions .view, .view {
overflow: hidden;
}

.last_post, .col_c_stats, .col_f_views, .line_height, .ipsList_withminiphoto .list_content {
line-height: 18px;
}

.last_post {
margin-left: 45px;
}

.ipsType_small {
font-size: 11px;
}

ol, ul {
list-style: none;
}

.idxForumDesc {
padding: 0px 10px 0 10px;
font-size: 12px;
color: #A4A4A4;
line-height: 18px;
height: 57px;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-top: 0!important;
margin-top: -25px;
}

a.ipsUserPhotoLink, a.userNavPhoto {
position: relative;
}

.left {
float: left;
}

a {
color: #111;
text-decoration: none;
}

.ipsUserPhoto {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.ipsUserPhoto_mini {
width: 36px;
height: 36px;
}

a.userNavPhoto:hover, .ipsUserPhotoLink:hover .ipsUserPhoto {
opacity: 0.8;
}

a.userNavPhoto:after, a.ipsUserPhotoLink:after {
content: "";
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
right: 0;
bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 0px 1px 5px, inset rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
-moz-box-shadow: inset rgba(0,0,0,0.2) 0px 1px 5px, inset rgba(0,0,0,0.08) 0px 0px 0px 1px;
box-shadow: inset rgba(0, 0, 0, 0.2) 0px 1px 5px, inset rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}


jQuery Code:


Important: Amplasare: Index si SubForumuri.
Demo 1: https://i.servimg.com/u/f56/18/54/25/61/110.jpg
Demo 2: https://i.servimg.com/u/f56/18/54/25/61/211.jpg

Pentru a vedea codul js trebuie sa raspunzi in minim 3 cuvinete

Comentariile utilizatorilor
Membru ET
avatar
la data de Mier 16 Oct - 20:50
Typlo Membru ET
Conectat
Super cod felicitari pentru munca depusa
Membru activ
la data de Joi 17 Oct - 0:06
Zeke Membru activ
Conectat
Arată foarte bine , felicitări Staark
Vizitator
avatar
la data de Joi 17 Oct - 7:37
Vizitator Vizitator
Conectat
Multumesc Incerc sa aduc cate ceva nou pe fg
Membru ET
avatar
la data de Joi 17 Oct - 23:42
emy [;x] Membru ET
Conectat
felicitari pentru cod
Membru ET
la data de Dum 27 Oct - 9:04
hh Membru ET
Conectat
misto
Membru nou
avatar
la data de Dum 27 Oct - 14:31
Sandu1 Membru nou
Conectat
Super codul
Membru ET
avatar
la data de Dum 27 Oct - 21:52
vLaDyX Membru ET
Conectat
felicitari pentru cod
Membru ET
avatar
la data de Mier 13 Noi - 17:17
Gregory House Membru ET
Conectat
Super codul .
Membru dedicat
avatar
la data de Joi 14 Noi - 0:14
mr.franta Membru dedicat
Conectat
chiar interesant stark
Membru ET
avatar
la data de Joi 26 Dec - 22:42
Rise4you Membru ET
Conectat
da un aspect placut forumului
Membru ET
avatar
la data de Vin 27 Dec - 10:52
kitkat Membru ET
Conectat
Felicitarile mele Stark
Membru ET
avatar
la data de Joi 20 Feb - 23:49
.Nick Membru ET
Conectat
chiar interesant stark
Membru ET
avatar
la data de Dum 23 Feb - 2:13
Cronos Membru ET
Conectat
Arata foarte bine
Membru ET
avatar
la data de Sam 1 Mar - 11:35
Micul`Wji Membru ET
Conectat
super felicitari
Membru ET
avatar
la data de Sam 1 Mar - 11:55
SHiinQ Membru ET
Conectat
Frumos ,bravo !
Membru nou
avatar
la data de Vin 4 Apr - 18:34
Abdalah tupe Membru nou
Conectat
nice
Membru ET
avatar
la data de Sam 5 Apr - 9:01
NuPermiT Membru ET
Conectat
Frumos.
Arata foarte bine.
Membru nou
avatar
la data de Dum 25 Mai - 3:47
QuaZz Membru nou
Conectat
Multumesc Incerc sa aduc cate ceva nou pe fg
Membru nou
avatar
la data de Lun 26 Mai - 20:42
DarkSTARz2399 Membru nou
Conectat
Felicitari , keep up the good work !
Admin & Dezvoltator
avatar
la data de Lun 26 Mai - 21:16
SSYT Admin & Dezvoltator
Conectat
Thanks for all !
Membru ET
avatar
la data de Lun 9 Iun - 16:07
WDC./ Membru ET
Conectat
Interesant.
Membru nou
avatar
la data de Dum 15 Iun - 17:48
AccideNtaL ' GeNius Membru nou
Conectat
sa vedem
Membru nou
avatar
la data de Dum 23 Noi - 17:22
Shadowic Membru nou
Conectat
ty
Membru nou
avatar
la data de Sam 6 Dec - 10:14
Flew Membru nou
Conectat
frumos bv
Membru ET
avatar
la data de Lun 9 Mar - 20:24
Lcnnaid. Membru ET
Conectat
foarte tare
Membru ET
avatar
la data de Vin 27 Mar - 23:42
hamsahaq Membru ET
Conectat
Bravo
Membru ET
avatar
la data de Mier 1 Apr - 22:53
cris_is Membru ET
Conectat
chiar interesant
Membru ET
la data de Dum 5 Apr - 11:36
cata90 Membru ET
Conectat
interesant, felicitari pentru munca depusa