На что способен CSS (часть 1)
Честно говоря это даже и статьей назвать трудно. Делал чистку на диске и обнаружил свои ранние эксперименты с css. Идея была в том, чтобы воплотить некоторые вывески, названия, логотипы, обнаруженные в журналах или на улице, с помощью css. Ну вот, собственно, и сам результат. Может кому-то будет интересно.
Версия для печати
Полная версия
#main_ex1{
margin-left: auto;
margin-right: auto;
width: 150px;
}
#text{
margin-left:7px;
margin-top:3px;
font-family: Arial, Helvetica, sans-serif;
font-size:65px;
font-weight:bold;
position: absolute;
}
#back{
width: 50px;
height: 50px;
background-color:#0CF;
position: absolute;
}
<div id=main_ex1>
<div id=back></div>
<div id=text>Ш<font size=1>атуро service</font></div>
</div>
#main_ex2{
font-family: "Times New Roman", Times, serif;
font-size:65px;
margin-left: auto;
margin-right: auto;
width: 160px;
}
#textin{
font-size:65px;
float: left;
padding:5px;
}
#texti{
font-size:36px;
font-weight: bold;
vertical-align:top;
text-align: center;
float: left;
padding-top:5px;
}
#textn{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
vertical-align:top;
font-size:15px;
}
<div id=main_ex2>
<div id=textin>B</div>
<div id=texti>on<br><div id=textn>street</div></div>
<div id=textin>D</div>
</div>
#main_ex3{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 135px;
margin-left: auto;
margin-right: auto;
}
#avtor{
font-size:12px;
}
#line_g{
font-size:1px;
height: 10px;
background-color:#D00;
margin-left:5px;
margin-right:5px;
}
#line_v{
width: 10px;
height: 30px;
background-color:#D00;
float:left;
font-size:1px;
}
#t{
font-weight: bold;
font-size:36px;
float:left;
padding-left:1px;
padding-right:1px;
line-height: 0.8;
}
<div id=main_ex3>
<div id=avtor>А. Калецкий</div>
<div id=line_g> </div>
<div id=t>МЕ</div>
<div id=line_v> </div>
<div id=t>РО</div>
<div id=avtor>подземный роман</div>
</div>
#main_ex4{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
font-weight:bold;
margin-left: auto;
margin-right: auto;
width: 150px;
}
#main_text{
position: absolute;
margin-left: 3px;
margin-top: 3px;
color:#000;
}
#shadow{
color:#ccc;
}
<div id=main_ex4>
<div id=main_text>-ТЕНЬ-</div>
<div id=shadow>-ТЕНЬ-</div>
</div>
#main_ex5{
margin-left: auto;
margin-right: auto;
width: 150px;
}
#line{
width: 5px;
height: 45px;
background-color:#000;
float:left;
font-size:1px;
}
<div id=main_ex5>
<div id=line style="width:2px;height: 63px; margin-left:2px"> </div>
<div id=line style="width:2px;height: 63px; margin-left:2px"> </div>
<div id=line style="width:2px;margin-left:3px"> </div>
<div id=line style="width:3px;margin-left:4px"> </div>
<div id=line style="width:4px;margin-left:3px"> </div>
<div id=line style="width:2px;margin-left:3px"> </div>
<div id=line style="width:3px;margin-left:4px"> </div>
<div id=line style="width:2px;margin-left:2px"> </div>
<div id=line style="width:4px;margin-left:3px"> </div>
<div id=line style="width:5px;margin-left:3px"> </div>
<div id=line style="width:4px;margin-left:2px"> </div>
<div id=line style="width:3px;margin-left:4px"> </div>
<div id=line style="width:2px;height: 63px; margin-left:2px"> </div>
<div id=line style="width:2px;height: 63px; margin-left:2px"> </div>
<div id=line style="width:2px;margin-left:3px"> </div>
<div id=line style="width:4px;margin-left:3px"> </div>
<div id=line style="width:1px;margin-left:3px"> </div>
<div id=line style="width:3px;margin-left:3px"> </div>
<div id=line style="width:1px;margin-left:3px"> </div>
<div id=line style="width:2px;margin-left:3px"> </div>
<div id=line style="width:3px;margin-left:4px"> </div>
<div id=line style="width:4px;margin-left:3px"> </div>
<div id=line style="width:4px;margin-left:3px"> </div>
<div id=line style="width:5px;margin-left:3px"> </div>
<div id=line style="width:2px;height: 63px; margin-left:2px"> </div>
<div id=line style="width:2px;height: 63px; margin-left:2px"> </div>
</div>
#main_ex6{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
}
#big{
background-color:#ffcc99;
color:#000;
float:left;
}
#nor{
background-color:#000;
color:#fff;
float:left;
}
<div id=main_ex6>
<div id=big>V</div>
<div id=nor>ektor</div>
<div id=big>Z</div>
<div id=nor>one</div>
</div>
Если вдруг у Вас появилось желание самим попробовать свои силы - просто оглянитесь вокруг и присылайте результаты своего творчества мне . Опубликую. Ну что, слабо?
