{"id":47,"date":"2012-06-14T21:22:06","date_gmt":"2012-06-15T03:22:06","guid":{"rendered":"http:\/\/j35u5.com.mx\/blog\/?p=47"},"modified":"2014-10-31T12:00:52","modified_gmt":"2014-10-31T18:00:52","slug":"sobre-en-css3-con-before-y-after","status":"publish","type":"post","link":"https:\/\/daimonikos.com\/blog\/sobre-en-css3-con-before-y-after\/","title":{"rendered":"Sobre en CSS3 con :before y :after"},"content":{"rendered":"<p>En este tutorial crearemos un sobre utilizando \u00fanicamente hojas de estilos.<\/p>\n<div align=\"center\"><a class=\"button\" href=\"http:\/\/daimonikos.com\/demo\/css3_envelope.html\" target=\"_blank\">Ver ejemplo en funcionamiento<\/a><\/div>\n<p>Lo primero que necesitamos, es un elemento que nos sirva como base para el sobre:<\/p>\n<pre class=\"prettyprint\">\r\n&lt;div id=&quot;envelope&quot;&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Como estilo inicial colocaremos un borde punteado, esquinas redondeadas y de un tama\u00f1o relativamente grande para ver los resultados:<\/p>\n<pre class=\"prettyprint\">\r\n#envelope{\r\n\tborder:5px dashed #F00;\r\n\t-webkit-border-radius:10px;\r\n\t-moz-border-radius:10px;\r\n\t-o-border-radius:10px;\r\n\tborder-radius:10px;\r\n\theight:250px;\r\n\tmargin:0 auto;\r\n\tposition:relative;\r\n\twidth:400px;\r\n}\r\n<\/pre>\n<p>Ahora utilizando el pseudoselector <em>:before<\/em> se genera un segundo elemento al cual s\u00f3lo dejaremos el borde inferior. Aplicamos una rotaci\u00f3n y lo desplazamos con <em>left<\/em> y <em>top<\/em>.<\/p>\n<p>Son importantes las propiedades <em>content<\/em> y <em>position<\/em> para que se pueda mostrar correctamente.<\/p>\n<pre class=\"prettyprint\">\r\n#envelope:before{\r\n\tborder-bottom:5px dashed #F00;\r\n\tcontent:\"\";\r\n\theight:5px;\r\n\tleft:-25px;\r\n\tposition:absolute;\r\n\ttop:63px;\r\n\t-webkit-transform:rotate(35deg);\r\n\t-moz-transform:rotate(35deg);\r\n\t-ms-transform:rotate(35deg);\r\n\t-o-transform:rotate(35deg);\r\n\ttransform:rotate(35deg);\r\n\twidth:250px;\r\n}\r\n<\/pre>\n<p>Con el pseudoselector :after generamos otro elemento igual pero con una rotaci\u00f3n inversa.<\/p>\n<pre class=\"prettyprint\">\r\n#envelope:after{\r\n\tborder-bottom:5px dashed #F00;\r\n\tcontent:\"\";\r\n\theight:5px;\r\n\tleft:175px;\r\n\tposition:absolute;\r\n\ttop:63px;\r\n\t-webkit-transform:rotate(-35deg);\r\n\t-moz-transform:rotate(-35deg);\r\n\t-ms-transform:rotate(-35deg);\r\n\t-o-transform:rotate(-35deg);\r\n\ttransform:rotate(-35deg);\r\n\twidth:250px;\r\n}\r\n<\/pre>\n<p>De esta manera optimizamos el c\u00f3digo creando 3 elementos a partir de uno solo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este tutorial crearemos un sobre utilizando \u00fanicamente hojas de estilos. Ver ejemplo en funcionamiento Lo primero que necesitamos, es un elemento que nos sirva como base para el sobre: &lt;div id=&quot;envelope&quot;&gt;&lt;\/div&gt; Como estilo inicial colocaremos un borde punteado, esquinas redondeadas y de un tama\u00f1o relativamente grande para ver los resultados: #envelope{ border:5px dashed #F00; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":177,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[11,12,10],"class_list":["post-47","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-after","tag-before","tag-css3"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":0,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media\/177"}],"wp:attachment":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}