Здравейте,
Някой може ли да ми даде съвет за това как да направя Header-a от ляво червен и от дясно син?
Опитах с before и after и с background:red; но то си иска да има съдържание...
Благодаря много :)
Може да пробваш с:
background: linear-gradient(to right,red,red 33.3%,green 33.3%,green 67.7%,blue 67.7%);
-webkit-linear-gradient(left, red 30%, ....), но и на мен ми е трудно да ги направя 3 :D
Точно така, но два пъти зелен по средата. Колкото процентите са по-близки между отделните цветове, толкова по-малко смесване ще има между тях.
-webkit-linear-gradient(left, red, red 33.333%, green 33.333%, green 67.666%, blue 67.666%);
Това става с градиент:
http://codepen.io/anon/pen/LEdxmO.css
Разбира се, има си градиент генератори, които много улесняват нещата -> http://www.cssmatic.com/gradient-generator
Успех! :)
Много ви благодаря на всички! :) Получи се така :) Ще трябва да се поупражнявам с тези градиенти :)
Здравейте,
Oтностно същата задача (Color Kitchen) някой може ли да ми даде съвет за това как да си направя таблиците една до друга така както е дадено опитвам да го направя вече з часа но не ми се получава...
Благодаря много :)
Ами аз не използвам таблици. Най-вероятно е малко дървен подход, но аз им дефинирам точно определени места на nav и sectiona в body-to.
nav {
width:157px;
margin:22px 20px 20px 10px;
background-color:white;
opacity:0.9;
border-radius:15px;
padding:15px;
padding-top:10px;
padding-left:10px;
position:fixed;
}
section {
margin: 22px 20px 20px 222px;
}
section article{
width:auto;
background-color:white;
opacity:0.9;
border-radius:15px;
padding:15px;
margin-top:20px;
}
Правилният начин е да се използва float. Първо дефинираш размерите на всеки "блок" и след това им задаваш float:left/right в зависимост от позицията на "блока". Показвам с пример :).
http://codepen.io/anon/pen/NPYjzM
Използвал съм проценти, за да бъде по-responsive. Оттук в последствие могат да се дефинират media queries за отделните големини дисплеи и т.н. Като цяло е добра практика да не се ползват фикснати размери, защото живеем в 2015, когато 60 и повече процента от потребителите преглеждат уеб съдържание през някакво мобилно устройство. :)
В моето решение използвам float за позициониране на <aside> и <section>.
Чрез float:left или float:right съответният елемент се залепя вляво или вдясно в пространството, което може да заеме.
Ето малко код, за да стане по-разбираемо:
aside{
width:17%;
min-width:170px;
background: rgba(255,255,255,0.9);
border-radius: 20px;
float:left;
margin-left:2%;
padding: 20px;
}
section{
width:70%;
min-width:700px;
float:right;
margin-right:5%;
}