wordpress visitor
» Homer Simpson con CSS | Informática Práctica |
Salta | Entrar | RSS
    Descargar música gratis Los mejores artistas digitales y photografos
    El Hobbit la película

Feed

Blogroll


Archivos

Categorías



Homer Simpson con CSS

Escrito por J.F. el Jueves, 10 de Abril del 2008 a las 17:16

Increíble, pero hay gente capaz de realizar increíbles diseños simplemene con html+CSS, como es el caso de éste Homer Simpson, realizado por Román Cortés y publicado en su blog. Como el mismo comenta, Homer realizado con CSS se ve correctamente en Internet Explorer 5.5, 6 y 7, Firefox 2, Safari 3 y Opera 9.

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
•
•
•
•
•
_
_
_
•
•
•
C
C
O
(
-

Si quieres ver todo el código, lo puedes ver después del salto:

TEXTO PLANO
HTML:
  1. <div style="width: 100%; height: 466px;">
  2. <div style="float: left; border: 2px solid #000; line-height: normal; background-color: #fff;">
  3. <div style="width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px; overflow: hidden;">
  4. <div style="margin-top: -0.7em">
  5. <div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;">
  6. <div style="font-size: 2.57em; font-weight: bold; color: #000;">o</div>
  7. </div>
  8. <div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;">
  9. <div style="font-size: 2.38em; font-weight: bold; color: #fff;">o</div>
  10. </div>
  11. <div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;">
  12. <div style="font-size: 2.48em; color: #000;">o</div>
  13.  
  14. </div>
  15. <div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;">
  16. <div style="font-size: 2.23em; color: #fff;">o</div>
  17. </div>
  18. <div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;">
  19. <div style="width: 0.32em; height: 0.52em; background-color: #fff;"></div>
  20. </div>
  21. <div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;">
  22. <div style="font-size: 0.8em; font-style: italic; color: #000;">(</div>
  23. </div>
  24. <div style="color: #000;">
  25. <div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;">
  26. <div style="font-size: 4.57em;">O</div>
  27. </div>
  28.  
  29. <div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;">
  30. <div style="font-size: 3.53em;">O</div>
  31. </div>
  32. <div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;">
  33. <div style="font-size: 4.63em;">O</div>
  34. </div>
  35. <div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;">
  36. <div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div>
  37. </div>
  38. <div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;">
  39. <div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div>
  40. </div>
  41. <div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;">
  42.  
  43. <div style="font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>
  44. </div>
  45. <div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;">
  46. <div style="font-size: 0.7em; font-weight: bold;">O</div>
  47. </div>
  48. <div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;">
  49. <div style="font-size: 0.97em; font-weight: bold;">O</div>
  50. </div>
  51. </div>
  52. <div style="color: #FED90E">
  53. <div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;">
  54. <div style="font-size: 4.37em;">O</div>
  55. </div>
  56.  
  57. <div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;">
  58. <div style="font-size: 3.37em;">O</div>
  59. </div>
  60. <div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;">
  61. <div style="font-size: 4.42em;">O</div>
  62. </div>
  63. <div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;">
  64. <div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div>
  65. </div>
  66. <div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;">
  67. <div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div>
  68. </div>
  69. <div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;">
  70.  
  71. <div style="font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>
  72. </div>
  73. <div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;">
  74. <div style="font-size: 0.55em; font-weight: bold;">O</div>
  75. </div>
  76. </div>
  77. <div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;">
  78. <div style="width: 1.92em; height: 5.76em; background-color: #FED90E;"></div>
  79. </div>
  80. <div style="position: absolute; padding-left: 3.70em; padding-top: 2.73em;">
  81. <div style="width: .30em; height: 1.56em; background-color: #FED90E;"></div>
  82. </div>
  83. <div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;">
  84. <div style="width: .16em; height: .34em; background-color: #FED90E;"></div>
  85. </div>
  86.  
  87. <div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;">
  88. <div style="font-size: 10px">
  89. <div style="width: 2.6em; height: 3.0em; background-color: #FED90E;"></div>
  90. </div>
  91. </div>
  92. <div style="color: #000;">
  93. <div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;">
  94. <div style="font-size: 0.67em;">|</div>
  95. </div>
  96. <div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;">
  97. <div style="font-size: 0.67em;">|</div>
  98. </div>
  99. <div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;">
  100. <div style="font-size: 0.67em;">\</div>
  101.  
  102. </div>
  103. <div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;">
  104. <div style="font-size: 0.67em;">\</div>
  105. </div>
  106. <div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;">
  107. <div style="font-size: 0.67em;">|</div>
  108. </div>
  109. <div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;">
  110. <div style="font-size: 0.67em;">|</div>
  111. </div>
  112. <div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;">
  113. <div style="font-size: 0.67em;">\</div>
  114. </div>
  115.  
  116. <div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;">
  117. <div style="font-size: 0.67em;">\</div>
  118. </div>
  119. <div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;">
  120. <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>
  121. </div>
  122. <div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;">
  123. <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>
  124. </div>
  125. <div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;">
  126. <div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div>
  127. </div>
  128. <div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;">
  129.  
  130. <div style="font-size: 1.11em; font-weight: bold;">(</div>
  131. </div>
  132. <div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;">
  133. <div style="font-size: 2.4em; font-weight: bold;">8</div>
  134. </div>
  135. <div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;">
  136. <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>
  137. </div>
  138. <div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;">
  139. <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>
  140. </div>
  141. <div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;">
  142. <div style="font-size: 3.06em; font-weight: bold;">o</div>
  143.  
  144. </div>
  145. </div>
  146. <div style="color: #CDB26F">
  147. <div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;">
  148. <div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div>
  149. </div>
  150. <div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;">
  151. <div style="font-size: 1.04em; font-weight: bold;">(</div>
  152. </div>
  153. <div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;">
  154. <div style="font-size: 2.25em; font-weight: bold;">8</div>
  155. </div>
  156. <div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;">
  157. <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>
  158.  
  159. </div>
  160. <div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;">
  161. <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>
  162. </div>
  163. <div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;">
  164. <div style="font-size: 2.87em; font-weight: bold;">o</div>
  165. </div>
  166. </div>
  167. <div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;">
  168. <div style="width: .76em; height: 1em; background-color: #CDB26F;"></div>
  169. </div>
  170. <div style="color: #000">
  171. <div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;">
  172. <div style="font-size: 2.2em;">o</div>
  173.  
  174. </div>
  175. <div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;">
  176. <div style="font-size: 1.01em;">)</div>
  177. </div>
  178. <div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;">
  179. <div style="font-size: 0.72em;">)</div>
  180. </div>
  181. <div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;">
  182. <div style="font-size: 0.94em;">b</div>
  183. </div>
  184. <div style="position: absolute; padding-left: 4em; padding-top: 5.09em;">
  185. <div style="font-size: 1.59em; font-weight: bold;">o</div>
  186. </div>
  187.  
  188. <div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;">
  189. <div style="font-size: 1.95em; font-weight: bold;">O</div>
  190. </div>
  191. <div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;">
  192. <div style="font-size: 2.42em; font-weight: bold;">o</div>
  193. </div>
  194. <div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;">
  195. <div style="font-size: 2.23em; font-weight: bold;">o</div>
  196. </div>
  197. <div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;">
  198. <div style="font-size: 2.23em; font-weight: bold;">o</div>
  199. </div>
  200. <div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;">
  201.  
  202. <div style="font-size: 1.9em; font-weight: bold;">o</div>
  203. </div>
  204. <div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;">
  205. <div style="font-size: 1.97em; font-weight: bold;">o</div>
  206. </div>
  207. </div>
  208. <div style="color: #CDB26F">
  209. <div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;">
  210. <div style="font-size: 2.06em;">o</div>
  211. </div>
  212. <div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;">
  213. <div style="font-size: 0.95em;">)</div>
  214. </div>
  215.  
  216. <div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;">
  217. <div style="font-size: 0.88em;">b</div>
  218. </div>
  219. <div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;">
  220. <div style="font-size: 1.48em; font-weight: bold;">o</div>
  221. </div>
  222. <div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;">
  223. <div style="font-size: 1.83em; font-weight: bold;">O</div>
  224. </div>
  225. <div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;">
  226. <div style="font-size: 2.27em; font-weight: bold;">o</div>
  227. </div>
  228. <div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;">
  229.  
  230. <div style="font-size: 2.09em; font-weight: bold;">o</div>
  231. </div>
  232. <div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;">
  233. <div style="font-size: 2.08em; font-weight: bold;">o</div>
  234. </div>
  235. <div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;">
  236. <div style="font-size: 1.78em; font-weight: bold;">o</div>
  237. </div>
  238. <div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;">
  239. <div style="font-size: 1.85em; font-weight: bold;">o</div>
  240. </div>
  241. <div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;">
  242. <div style="font-size: 1.93em; font-weight: bold;">o</div>
  243.  
  244. </div>
  245. <div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;">
  246. <div style="font-size: 1.93em; font-weight: bold;">o</div>
  247. </div>
  248. <div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;">
  249. <div style="font-size: 1.44em; font-weight: bold;">o</div>
  250. </div>
  251. <div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;">
  252. <div style="font-size: 0.82em; font-weight: bold;">o</div>
  253. </div>
  254. <div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;">
  255. <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
  256. </div>
  257.  
  258. <div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;">
  259. <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
  260. </div>
  261. <div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;">
  262. <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>
  263. </div>
  264. </div>
  265. <div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;">
  266. <div style="font-size: 2.76em; font-weight: bold; color: #000;">&bull;</div>
  267. </div>
  268. <div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">
  269. <div style="font-size: 2.49em; font-weight: bold; color: #fff;">&bull;</div>
  270. </div>
  271. <div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">
  272. <div style="font-size: 0.28em; font-weight: bold; color: #000;">&bull;</div>
  273.  
  274. </div>
  275. <div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">
  276. <div style="font-size: 1.47em; font-weight: bold; color: #000;">&bull;</div>
  277. </div>
  278. <div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">
  279. <div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">&bull;</div>
  280. </div>
  281. <div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">
  282. <div style="font-size: 10px">
  283. <div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div>
  284. </div>
  285. </div>
  286. <div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">
  287. <div style="font-size: 1.2em; color: #000;">_</div>
  288. </div>
  289. <div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;">
  290.  
  291. <div style="font-size: 1.2em; color: #000;">_</div>
  292. </div>
  293. <div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;">
  294. <div style="font-size: 1.2em; color: #000;">_</div>
  295. </div>
  296. <div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;">
  297. <div style="font-size: 3.04em; font-weight: bold; color: #000;">&bull;</div>
  298. </div>
  299. <div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">
  300. <div style="font-size: 2.77em; font-weight: bold; color: #fff;">&bull;</div>
  301. </div>
  302. <div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">
  303. <div style="font-size: 0.28em; font-weight: bold; color: #000;">&bull;</div>
  304. </div>
  305. <div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;">
  306.  
  307. <div style="font-size: 0.66em; color: #000;">C</div>
  308. </div>
  309. <div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">
  310. <div style="font-size: 0.66em; color: #000;">C</div>
  311. </div>
  312. <div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">
  313. <div style="font-size: 10px">
  314. <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>
  315. </div>
  316. </div>
  317. <div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;">
  318. <div style="font-size: 0.8em; font-weight: bold; color: #FED90E;">O</div>
  319. </div>
  320. <div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;">
  321.  
  322. <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">(</div>
  323. </div>
  324. <div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;">
  325. <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">-</div>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. </div>

Vía: | SigT

Categoría: Curiosidades, CSS |

Entradas relacionadas


3 Comentarios

  1. Román Cortés dijo:
    Abril 10th, 2008 at 17:54

    ¡Gracias por publicar el código! Yo *debería* haberlo hecho, pero tras horas montando mi nuevo blog, estaba demasiado cansado como para meter una ventanita de código… Queda muy bien con el código coloreado :)

  2. J.F. dijo:
    Abril 10th, 2008 at 18:56

    De nada :P Para poner código con sintáxis coloreada uso el plugin iG:Syntax Hilite, tengo un tutorial explicando instalación y configuración.
    Un saludo amigo ;-)

  3. Victor dijo:
    Mayo 23rd, 2008 at 3:03

    Amigo, Fascinante no creí qu se pudiera hacer esto con css veo que me falta demasiado por aprender :) saludos y surte con tu blog esta muy bueno.

Deja un comentario

XHTML: Etiquetas permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Tenga en cuenta: La moderación de comentarios se encuentra activada, por lo que su comentario podría tardar en aparecer. No hay razón para enviar varias veces su comentario.