Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Ieri la 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

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

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: http://i56.servimg.com/u/f56/18/54/25/61/110.jpg
Demo 2: http://i56.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
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
la data de Joi 17 Oct - 7:37
Vizitator Vizitator
Conectat
Multumesc Incerc sa aduc cate ceva nou pe fg
Membru ET
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
la data de Dum 27 Oct - 14:31
Sandu1 Membru nou
Conectat
Super codul
Membru ET
la data de Dum 27 Oct - 21:52
vLaDyX Membru ET
Conectat
felicitari pentru cod
Membru ET
la data de Mier 13 Noi - 17:17
Gregory House Membru ET
Conectat
Super codul .
Membru dedicat
la data de Joi 14 Noi - 0:14
mr.franta Membru dedicat
Conectat
chiar interesant stark
Membru ET
la data de Joi 26 Dec - 22:42
Rise4you Membru ET
Conectat
da un aspect placut forumului
Membru ET
la data de Vin 27 Dec - 10:52
kitkat Membru ET
Conectat
Felicitarile mele Stark
Membru ET
la data de Joi 20 Feb - 23:49
.Nick Membru ET
Conectat
chiar interesant stark
Membru ET
la data de Dum 23 Feb - 2:13
Cronos Membru ET
Conectat
Arata foarte bine
Membru ET
la data de Sam 1 Mar - 11:35
Micul`Wji Membru ET
Conectat
super felicitari
Membru ET
la data de Sam 1 Mar - 11:55
SHiinQ Membru ET
Conectat
Frumos ,bravo !
Membru nou
la data de Vin 4 Apr - 18:34
Abdalah tupe Membru nou
Conectat
nice
Membru ET
la data de Sam 5 Apr - 9:01
NuPermiT Membru ET
Conectat
Frumos.
Arata foarte bine.
Membru nou
la data de Dum 25 Mai - 3:47
QuaZz Membru nou
Conectat
Multumesc Incerc sa aduc cate ceva nou pe fg
Membru nou
la data de Lun 26 Mai - 20:42
DarkSTARz2399 Membru nou
Conectat
Felicitari , keep up the good work !
Admin & Dezvoltator
la data de Lun 26 Mai - 21:16
SSYT Admin & Dezvoltator
Conectat
Thanks for all !
Membru ET
la data de Lun 9 Iun - 16:07
WDC./ Membru ET
Conectat
Interesant.
Membru nou
la data de Dum 15 Iun - 17:48
AccideNtaL ' GeNius Membru nou
Conectat
sa vedem
Membru nou
la data de Dum 23 Noi - 17:22
Shadowic Membru nou
Conectat
ty
Membru nou
la data de Sam 6 Dec - 10:14
Flew Membru nou
Conectat
frumos bv
Membru ET
la data de Lun 9 Mar - 20:24
Lcnnaid. Membru ET
Conectat
foarte tare
Membru ET
la data de Vin 27 Mar - 23:42
hamsahaq Membru ET
Conectat
Bravo
Membru ET
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