iltasyazilim adlı üyeden alıntı

header

kodu






css kodu



* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
}

body {margin:0;font-size:11px; font-family: Helvetica; line-height:1;}

#manset {
overflow: hidden;
position: relative;
margin: 0 auto 20px;
width: 960px;
height: 350px;
z-index: 11;
background-color: #e74c3c;
}

.ana-haber {
float: left;
overflow: hidden;
position: relative;
width: 558px;
height: 350px;
border-left: 0px solid #fff;
box-shadow: 0 1px 0 #fff;
}

.ana-haber:hover img {
opacity: .4;
}

.ana-haber-resim {
display: block;
position: relative;
width: 100%;
height: 100%;
}

.ana-haber-resim:before {
content: '';
opacity: .5;
float: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
-moz-box-shadow: 0 0 150px 0px #e74c3c inset;
-ms-box-shadow: 0 0 150px 0px #e74c3c inset;
-o-box-shadow: 0 0 150px 0px #e74c3c inset;
-webkit-box-shadow: 0 0 150px 0px #e74c3c inset;
box-shadow: 0 0 150px 0px #e74c3c inset;
}

.ana-haber img {
float: left;
opacity: 1;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
-webkit-transition: opacity .4s;
transition: opacity .4s;
margin-left: -10px;
min-width: 580px;
height: auto;
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.buyuk-yazi {
color: #fff;
float: left;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
width: 558px;
background: background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
}

.buyuk-yazi h1 {
color: #fff;
float: left;
font-size: 40px;
font-weight: 700;
line-height: 120%;
margin: 0 4% 5px;
text-align: center;
text-decoration: none;
word-wrap: break-word;
-moz-text-shadow: 1px 1px 2px #000;
-ms-text-shadow: 1px 1px 2px #000;
-o-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
text-shadow: 1px 1px 2px #000;
text-transform: uppercase;
width: 92%;
}

.kucuk-haber {
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
box-shadow: 1px 0 0 #fff;
float: left;
overflow: hidden;
position: relative;
width: 201px;
height: 176px;
}

.kucuk-haber img {
float: left;
opacity: 1;
-moz-transition: opacity .4s;
-ms-transition: opacity .4s;
-webkit-transition: opacity .4s;
transition: opacity .4s;
width: 100%;
height: 100%;
}

.kucuk-haber-yazi {
padding: 10px 10px 8px;
position: absolute;
bottom: 0;
left: 0;
width: 200px;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 100%);
}

.kucuk-haber-yazi h2 {
color: #fff;
float: left;
font-size: 18px;
font-weight: 400;
line-height: 140%;
margin-bottom: 4px;
-moz-text-shadow: 1px 1px 2px #000;
-ms-text-shadow: 1px 1px 2px #000;
-o-text-shadow: 1px 1px 2px #000;
-webkit-text-shadow: 1px 1px 2px #000;
text-shadow: 1px 1px 2px #000;
text-transform: uppercase;
}

.kucuk-haber:hover img {
opacity: .2;
}