?

Log in

No account? Create an account

Классификация шоколада

Шоколад бывает всего трех видов:

1.


Плитка белого шоколада

Белый.



2.


Плитка молочного шоколада

Молочный.



3.


Плитка нижегородского шоколада

Нижний Новгород.




 
Основные принципы построения сайтов на современном этапе развития так называемой цивилизации.


Три картинкиCollapse )



твоя очередь рулить...



 

CSS3 box-shadow tricks

Без никаких картинок, чистый CSS.



1.





Тень непрямоугольной формы:





March, 2013

[Error: Irreparable invalid markup ('<div [...] bold;>') in entry. Owner must fix manually. Raw contents below.]

Без никаких картинок, чистый CSS.<br />
<br />
<h3>1.</h3><br />
<br />
Тень непрямоугольной формы:<br />
<br />
<div style="width: 500px; padding: 0px; background: #fff">
<div style="border: 1px solid #500; background: #c00; font-size: 25pt; color: #fff; font-family: &#39;Calibri&#39;, &#39;Tahoma&#39;, &#39;Arial&#39;; font-weight: bold; padding: 2ex; text-align: center; box-shadow: inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)">
March, 2013
</div>
<div style="border: 1px solid #eee; background: #eee; font-size: 175pt; font-family: "Calibri", "Tahoma", "Arial"; color: #444; font-weight: bold; text-align: center; line-height: 100%; padding: 0.3ex 1ex 0px 1ex; box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75), inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)">
29
<div style="font-size: 12pt; font-weight: normal; margin: 10ex 0px; line-height: 100%">
Четвертый день Пейсаха
</div>
</div>
<div style="height: 300px; background: #fff; margin: 75px 50px -350px 50px; border-radius: 150px; box-shadow: 0px -62px 50px rgba(255, 255, 255, 1)">
&nbsp;
</div>
</div>
<br />
Ниже обычной боксовой тени подкладывается невидимый <span style="font-family: monospace">div</span> со скругленными до безобразия углами (он сейчас находится прямо под этим текстом). От него отбрасывается вверх «тень» белого цвета овальной формы. Чтобы сам блок не влиял на расположение элементов страницы, его размеры уничтожаются с помощью отрицательных значений <span style="font-family: monospace">margin</span>.<br />
<br />
Код:<br />
<br />
<div style="font-family: monospace; font-size: 8pt">
<div style="width: 500px; padding: 0px; background: #fff" />
&nbsp;&nbsp;&lt;div style="border: 1px solid #500; background: #c00; font-size: 25pt; color: #fff; font-family: 'Calibri', 'Tahoma', 'Arial'; font-weight: bold; padding: 2ex; text-align: center; box-shadow: inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;March, 2013<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;div style="border: 1px solid #eee; background: #eee; font-size: 175pt; font-family: 'Calibri', 'Tahoma', 'Arial'; color: #444; font-weight: bold; text-align: center; line-height: 100%; padding: 0.3ex 1ex 0px 1ex; <span style="background: #ffc">box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75)</span>, inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;29<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="font-size: 12pt; font-weight: normal; margin: 10ex 0px; line-height: 100%"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Четвертый день Пейсаха<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;div style="height: 300px; background: #fff; margin: 75px 50px -350px 50px; <span style="background: #ffc">border-radius: 150px;</span> <span style="background: #ffc">box-shadow: 0px -62px 50px rgba(255, 255, 255, 1)</span>"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&lt;/div&gt;
</div>
<br />
<br />
<h3>2.</h3><br />
<br />
Ну и, возвращаясь к <a href="http://4px.livejournal.com/170014.html">ранее опубликованным обоям</a>, мазки мягкой кистью:<br />
<br />
<br />
<div style="padding: 0px; background: #fff">
<div style="float: left; margin: 0px; width: 275px; height: 275px">
<div style="background: transparent; width: 150px; height: 150px; margin: 0px 0px 0px -200px; border-radius: 25% 100%; box-shadow: 325px 125px 50px rgba(255, 212, 0, 0.75), 200px 0px 50px rgba(255, 0, 0, 0.75)">
&nbsp;
</div>
<div style="background: transparent; width: 150px; height: 150px; margin: 0px 0px 0px -200px; border-radius: 100% 25%; box-shadow: 200px -25px 50px rgba(0, 128, 255, 0.55), 325px -150px 50px rgba(0, 192, 0, 0.55)">
&nbsp;
</div>
</div>
<div style="font-size: 225px; font-family: &#39;Calibri&#39;, &#39;Tahoma&#39;, &#39;Arial&#39;; line-height: 100%; color: #333">
msft
</div>
<div style="clear: both">
&nbsp;
</div>
</div>
<br />
<br />
Тут все еще проще :-) Два (!) блока со скруглениями <span style="font-family: monospace">border-radius: 25% 100%</span> и <span style="font-family: monospace">border-radius: 100% 25%</span> имитируют овалы, наклоненные под разными углами, и отбрасывают <em>каждый по две</em> цветных тени. Сами блоки невидимы, их размеры убраны из основного потока. А тени отбрасываются на разные расстояния влево и вверх, чтобы получить четыре пятна. За счет коэффициентов прозрачности и размытия получается симпатичный эффект смешанных красок. К сожалению, эффект смешения <em>световых</em> пятен так не создать.<br />
<br />
Код:<br />
<div style="font-family: monospace; font-size: 8pt">
&lt;div style="padding: 0px; background: #fff"&gt;<br />
&nbsp;&nbsp;&lt;div style="float: left; margin: 0px; width: 275px; height: 275px"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="background: transparent; width: 150px; height: 150px; margin: 0px 0px 0px -200px; border-radius: 25% 100%; <span style="background: #ffc">box-shadow: 325px 125px 50px rgba(<span style="background: #ff0">255, 212, 0</span>, 0.75), 200px 0px 50px rgba(<span style="background: #f88">255, 0, 0</span>, 0.75)</span>"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="background: transparent; width: 150px; height: 150px; margin: 0px 0px 0px -200px; border-radius: 100% 25%; <span style="background: #ffc">box-shadow: 200px -25px 50px rgba(<span style="background: #8cf">0, 128, 255</span>, 0.55), 325px -150px 50px rgba(<span style="background: #8f8">0, 192, 0</span>, 0.55)</span>"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;div style="font-size: 225px; font-family: 'Calibri', 'Tahoma', 'Arial'; line-height: 100%; color: #333"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;msft<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&nbsp;&nbsp;&lt;div style="clear: both"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&amp;nbsp;<br />
&nbsp;&nbsp;&lt;/div&gt;<br />
&lt;/div&gt;
</div>
<br />
<br />
<br />
<lj-like />
<br />
<div style="clear: both; margin: 3em">&nbsp;</div>

Рабочее место

 


Облагородил сегодня портретом:



 

Enderman

 


Enderman


UPD. Рисовали вместе с сыном, он не дотерпел до конца раскрашивания, ушел к себе и нарисовал аналог в паинте:

Criper

Это крипер, который смотрит на город и мечтает его взорвать, потому что там много стивов. Собственно, по картинке и так все понятно.

 

Поджигай!

 

Шел медведь по полю.

 Видит: машина стоит.





Сел в нее. «Поджигай!»




P.S. Картинки можно пощелкать, если кому обои на стол нужны.




 

На Start. Внимание. Faiman.

Эпиграф:

Hitler on Seven





Вы там всё хихикаете. А я восьмерку сломал. Хоть и на втором тестовом периоде, но таки это win!

пруфпик и описаниеCollapse )