Navigare rapidă

Ultimele subiecte
» Cum sa repari un CD sau DVD "Idiot"
Scris de drax Mier 3 Mai - 10:05
» No Avatars
Scris de MihaiExtremTutorials Vin 28 Apr - 23:17
» Set complet de iconuri
Scris de drax Vin 28 Apr - 11:25
» Butoane Subiecte Multicolor
Scris de drax Vin 28 Apr - 11:23
Cuvinte-cheie

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

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