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

googo_10

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


Благодаря предварително и се надявам темата да е в правилният раздел :)
 
Има уроци по тази тема. Мисля че сам ако се потрудиш да го направиш, ще ти стане ясно как стават нещата :)
 
кое му е интересното не зная. Не си струва труда. Губене на време. Колкото до това, че неможеш да го кодираш. Гледай някой урок. Тва е дизайн за 5мин ... (ако мога да го нарека дизайн)
 
Кое трябва да се нареже. Цялата визия може да се постигне с CSS...
"Дизайна" е меко казано беден и стар...

п.п. Не мисля че ще има някой който ще ти го кодира за без пари.
 
като гледам нищо от това не се реже.
всичко е css :) една снимка няма.. само цвят.
 
vasilev каза:
като гледам нищо от това не се реже.
всичко е css :) една снимка няма.. само цвят.

Хаха само лупичката при търсене : D
 
deam0n каза:
vasilev каза:
като гледам нищо от това не се реже.
всичко е 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>

Ето лупичка без картинка. : ))
 
Fakeheal каза:
deam0n каза:
vasilev каза:
като гледам нищо от това не се реже.
всичко е 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.
 

Back
Горе