Помощ с кодирането на дизайнче

[googo_10]

Здравейте колеги. Днес намерих доста интересен дизайн за социална мрежа, проблема е, че не съм толкова добър със CSS и като цяло с кодирането на дизайните (винаги нещо ми се размества ). И бих искал да ви помоля, ако някой от вас може да ми го изреже и да го кодира ще съм му много благодарен (пс. дизайна е само картинка, нямам .psd за съжаление )! Ето снимката:

Благодаря предварително и се надявам темата да е в правилният раздел

 

[explozen]

Има уроци по тази тема. Мисля че сам ако се потрудиш да го направиш, ще ти стане ясно как стават нещата

 

[nqkafff]

кое му е интересното не зная. Не си струва труда. Губене на време. Колкото до това, че неможеш да го кодираш. Гледай някой урок. Тва е дизайн за 5мин ... (ако мога да го нарека дизайн)

 

[IvanAdamov]

Кое трябва да се нареже. Цялата визия може да се постигне с CSS...
"Дизайна" е меко казано беден и стар...

п.п. Не мисля че ще има някой който ще ти го кодира за без пари.

 

[vasilev]

като гледам нищо от това не се реже.
всичко е css една снимка няма.. само цвят.

 

[deam0n]

като гледам нищо от това не се реже.
всичко е css една снимка няма.. само цвят.

Хаха само лупичката при търсене : D

 

[peterpetrov309]

Свържи се с мен.

 

[Fakeheal]

като гледам нищо от това не се реже.
всичко е css една снимка няма.. само цвят.

Хаха само лупичката при търсене : D

Нем,

div.icon {
    height: 32px;
    width: 32px;
    position: relative;
    margin: 15px;
    overflow: hidden;
    display: inline-block;
}
div.icon div.search {
    height: 13px;
    width: 13px;
    background: transparent;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border: 4px solid #333;
}

div.icon div.search:after {
    content: '';
    width: 4px;
    height: 15px;
    background: #333;
    position: absolute;
    bottom: 2px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

<div class="icon">
    <div class="search"></div>
</div>

Ето лупичка без картинка. : ))

 

[deam0n]

като гледам нищо от това не се реже.
всичко е css една снимка няма.. само цвят.

Хаха само лупичката при търсене : D

Нем,

div.icon {
    height: 32px;
    width: 32px;
    position: relative;
    margin: 15px;
    overflow: hidden;
    display: inline-block;
}
div.icon div.search {
    height: 13px;
    width: 13px;
    background: transparent;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border: 4px solid #333;
}

div.icon div.search:after {
    content: '';
    width: 4px;
    height: 15px;
    background: #333;
    position: absolute;
    bottom: 2px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

<div class="icon">
    <div class="search"></div>
</div>

Ето лупичка без картинка. : ))

Хаха да и така може да се направи, но аз имах предвид за тази лупичка от картинката. Иначе тя и тя може да се постигне с малко gradient и box-shadow.