{"id":470,"date":"2010-02-13T02:22:51","date_gmt":"2010-02-13T02:22:51","guid":{"rendered":"https:\/\/deepubalan.com\/blog\/?p=470"},"modified":"2013-04-02T07:18:23","modified_gmt":"2013-04-02T07:18:23","slug":"css-heart-a-web-designer-way-of-wishing-valentines-day","status":"publish","type":"post","link":"https:\/\/deepubalan.com\/blog\/2010\/02\/13\/css-heart-a-web-designer-way-of-wishing-valentines-day\/","title":{"rendered":"CSS Heart \u2013 A web designer way of wishing Valentine\u2019s Day\u2026"},"content":{"rendered":"<div class=\"splashpic\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2010\/02\/CSS-art-Valentines-day-card-created-purely-using-css-and-html-download-free.jpg\" alt=\"CSS art - Valentine&#039;s day card created purely using css and html - download free\" title=\"CSS art - Valentine&#039;s day card created purely using css and html - download free\" width=\"525\" height=\"185\" class=\"aligncenter size-full wp-image-478\" srcset=\"https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2010\/02\/CSS-art-Valentines-day-card-created-purely-using-css-and-html-download-free.jpg 525w, https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2010\/02\/CSS-art-Valentines-day-card-created-purely-using-css-and-html-download-free-300x105.jpg 300w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/div>\n<p>Personally, I have never celebrated valentine\u2019s day in my life, in-fact I am completely against the idea of reserving days for our dear ones. Be it valentine\u2019s day, Mother\u2019s day or Friendship day, I just can\u2019t understand the logic of waiting for a particular day to celebrate love or express gratitude for my loved ones. My affection will always be there and my dear ones will know it all the time. Besides, at least in India Valentine\u2019s Day is nothing more than a marketing gimmick, it is hyped by marketing folks to sell their products.<\/p>\n<p>Similarly I am also gonna use this day for the first time just to <strong>market my blog<\/strong> \ud83d\ude09 <\/p>\n<p>Here in this day I am expressing here, my whole hearted love and affection towards such a wonderful web tool called <strong>CSS<\/strong>. That too in a different way, with a <strong>Pure CSS Valenties Day Card<\/strong>. <\/p>\n<p>This Valentine\u2019s Day Card is <strong>designed purely using CSS &#038; HTML<\/strong>. No images, fonts or symbols here, simply CSS with plain DIVs and Classes, even the text &#8216;I LOVE CSS&#8217;. Go ahead and check&#8230;<\/p>\n<p><strong>Browser Compatibility:<\/strong> I have checked it in Firefox 3.5 and Chrome 4.0 and it&#8217;s working fine in both the browsers. There are some rendering issues in IE-7 and Opera 9.02. I am not sure about Safari.<br \/>\n<br \/>[ad#ad-3]<\/p>\n<h2>CSS Heart &#8211; LIVE PREVIEW<\/h2>\n<p><\/p>\n<p align=\"center\"><iframe loading=\"lazy\" src=\"https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2010\/02\/css-art-demo.html\" style=\"padding: 0px; margin-left: -10px;\"frameBorder=0 scrolling=no width=\"530\" height=\"430\" ><\/iframe><\/p>\n<h2>Sample HTML Code<\/h2>\n<pre lang=\"html\" line=\"1\">\r\n<div id=\"container\">\r\n\t<div class=\"hrt-lft\"><\/div>\r\n\t<div class=\"hrt-rgt\"><\/div>\r\n\t<div class=\"bot\"><\/div>\r\n\r\n\t<div class=\"arw1\"><\/div>\r\n\t<div class=\"arw2\"><\/div>\r\n\t<div class=\"pointer\"><\/div>\r\n\t<div class=\"pointer2\"><\/div>\r\n\t<div class=\"pointer3\"><\/div>\r\n\r\n\t<div class=\"shade1\"><\/div>\r\n\t<div class=\"shade2\"><\/div>\r\n\t<div class=\"shade4\"><\/div>\r\n\t<div class=\"shade5\"><\/div>\r\n\t\r\n\t<div class=\"msg-holder\">\r\n\t\t<div class=\"i\"><\/div>\r\n\t\t<div class=\"l\">\r\n\t\t\t<div><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"o\">\r\n\t\t\t<div><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"v\"><\/div>\r\n\t\t<div class=\"v2\"><\/div>\r\n\t\t<div class=\"v3\"><\/div>\r\n\t\t<div class=\"e\">\r\n\t\t\t<div class=\"e2\"><\/div>\r\n\t\t\t<div class=\"e3\"><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"c\">\r\n\t\t\t<div><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"s\">\r\n\t\t\t<div class=\"s2\"><\/div>\r\n\t\t\t<div class=\"s3\"><\/div>\r\n\t\t<\/div>\r\n\t\t<div class=\"ss\">\r\n\t\t\t<div class=\"ss2\"><\/div>\r\n\t\t\t<div class=\"ss3\"><\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\n<p><!--more--><br \/>\n[ad#ad-1]<\/p>\n<h2>The CSS<\/h2>\n<pre lang=\"css\" line=\"1\">\r\n#container {\r\nheight:500px;\r\nmargin:0 auto;\r\nposition:relative;\r\nwidth:500px;\r\nz-index:1;\r\n}\r\n.hrt-lft {\r\n-moz-border-radius:150px 150px 0 0;\r\n-webkit-border-radius:150px 150px 0 0;\r\nbackground-color:#FF0000;\r\nfloat:left;\r\nheight:90px;\r\nleft:85px;\r\nposition:absolute;\r\nwidth:180px;\r\n}\r\n.hrt-rgt {\r\n-moz-border-radius:150px 150px 0 0;\r\n-webkit-border-radius:150px 150px 0 0;\r\nbackground-color:#FF0000;\r\nheight:90px;\r\nposition:absolute;\r\nright:85px;\r\nwidth:180px;\r\n}\r\n.bot {\r\nborder-left:165px solid transparent;\r\nborder-right:165px solid transparent;\r\nborder-top:165px solid #FF0000;\r\nfont-size:0;\r\nleft:85px;\r\nline-height:0;\r\nposition:absolute;\r\ntop:90px;\r\nwidth:0;\r\nz-index:1000;\r\n}\r\n.arw1 {\r\nbackground-color:#333333;\r\nheight:10px;\r\nleft:20px;\r\nposition:absolute;\r\ntop:80px;\r\nwidth:195px;\r\nz-index:1000;\r\n}\r\n.arw2 {\r\nbackground-color:#333333;\r\nheight:10px;\r\nposition:absolute;\r\nright:20px;\r\ntop:80px;\r\nwidth:66px;\r\nz-index:1000;\r\n}\r\n.pointer {\r\nborder-color:transparent transparent transparent #000000;\r\nborder-style:solid;\r\nborder-width:20px;\r\nfont-size:0;\r\nline-height:0;\r\nposition:absolute;\r\nright:-20px;\r\ntop:64px;\r\nwidth:0;\r\nz-index:1000;\r\n}\r\n.pointer2 {\r\nborder-color:#000000 #000000 #000000 transparent;\r\nborder-style:solid;\r\nborder-width:20px;\r\nfont-size:0;\r\nleft:0;\r\nline-height:0;\r\nposition:absolute;\r\ntop:65px;\r\nwidth:0;\r\nz-index:200;\r\n}\r\n.pointer3 {\r\nborder-color:#FFFFFF transparent;\r\nborder-style:solid;\r\nborder-width:20px;\r\nfont-size:0;\r\nleft:20px;\r\nline-height:0;\r\nposition:absolute;\r\ntop:65px;\r\nwidth:0;\r\nz-index:300;\r\n}\r\n.shade1 {\r\n-moz-border-radius:100px;\r\n-webkit-border-radius:100px;\r\nbackground-color:#FF9900;\r\nheight:100px;\r\nposition:absolute;\r\nright:120px;\r\ntop:25px;\r\nwidth:100px;\r\nz-index:1200;\r\n}\r\n.shade2 {\r\n-moz-border-radius:100px;\r\n-webkit-border-radius:100px;\r\nbackground-color:#FF0000;\r\nheight:120px;\r\nposition:absolute;\r\nright:115px;\r\ntop:35px;\r\nwidth:120px;\r\nz-index:1300;\r\n}\r\n.shade3 {\r\n-moz-border-radius:200px 300px 200px 350px;\r\n-webkit-border-radius:200px 300px 200px 350px;\r\nbackground-color:#FF0000;\r\nheight:170px;\r\nposition:absolute;\r\nright:60px;\r\ntop:102px;\r\nwidth:170px;\r\nz-index:1300;\r\n}\r\n.shade4 {\r\nborder-color:#FF9900 #FF9900 #FF9900 transparent;\r\nborder-style:solid;\r\nborder-width:0 11px 30px 40px;\r\nfont-size:0;\r\nline-height:0;\r\nposition:absolute;\r\nright:200px;\r\ntop:170px;\r\nwidth:0;\r\nz-index:1600;\r\n}\r\n.shade5 {\r\nborder-color:transparent #FF0000;\r\nborder-style:solid;\r\nborder-width:40px 37px 0 0;\r\nfont-size:0;\r\nline-height:0;\r\nposition:absolute;\r\nright:195px;\r\ntop:160px;\r\nwidth:0;\r\nz-index:1700;\r\n}\r\n.msg-holder\r\n{\r\n-moz-box-shadow:0 0 12px #D2D2D1;\r\n-webkit-box-shadow:0 0 12px #D2D2D1;\r\nbackground-color:#EEEEEE;\r\nborder:1px solid #D2D2D2;\r\nheight:50px;\r\nmargin:0 auto;\r\npadding:10px;\r\nposition:relative;\r\ntop:300px;\r\nwidth:90%;\r\n}\r\n.c {\r\n-moz-border-radius:15px 0 0 15px;\r\n-webkit-border-radius:15px 0 0 15px;\r\nbackground-color:#333333;\r\nheight:45px;\r\nposition:absolute;\r\nright:140px;\r\nwidth:45px;\r\n}\r\n.c div {\r\n-moz-border-radius:10px 4px 4px 10px;\r\n-webkit-border-radius:10px 4px 4px 10px;\r\nbackground-color:#eeeeee;\r\nheight:22px;\r\nposition:relative;\r\nright:-20px;\r\ntop:11px;\r\nwidth:25px;\r\n}\r\n.i {\r\nbackground-color:#333333;\r\nheight:45px;\r\nposition:absolute;\r\nleft:20px;\r\nwidth:17px;\r\n}\r\n.l {\r\nbackground-color:#333333;\r\nheight:45px;\r\nposition:absolute;\r\nleft:65px;\r\nwidth:35px;\r\n}\r\n.l div {\r\n-moz-border-radius:2px 0 3px 0;\r\n-webkit-border-radius:2px 0 3px 0;\r\nbackground-color:#eeeeee;\r\nheight:33px;\r\nleft:15px;\r\nposition:relative;\r\ntop:0;\r\nwidth:20px;\r\n}\r\n.o {\r\n-moz-border-radius:10px;\r\n-webkit-border-radius:10px;\r\nbackground-color:#333333;\r\nheight:45px;\r\nleft:105px;\r\nposition:absolute;\r\nwidth:45px;\r\n}\r\n.o div {\r\n-moz-border-radius:0 3px 0 3px;\r\n-webkit-border-radius:0 3px 0 3px;\r\nbackground-color:#eeeeee;\r\nheight:27px;\r\nleft:19px;\r\nposition:relative;\r\ntop:9px;\r\nwidth:8px;\r\n}\r\n.v {\r\nborder-color:#333333 transparent transparent;\r\nborder-style:solid;\r\nborder-width:60px 30px;\r\nfont-size:0;\r\nleft:152px;\r\nline-height:0;\r\nposition:absolute;\r\ntop:10px;\r\nwidth:0;\r\nz-index:300;\r\n}\r\n.v2 {\r\nbackground-color:#eeeeee;\r\nbottom:0;\r\nheight:15px;\r\nleft:165px;\r\nposition:absolute;\r\nwidth:30px;\r\nz-index:1000;\r\n}\r\n.v3 {\r\nborder-color:#eeeeee transparent transparent;\r\nborder-style:solid;\r\nborder-width:60px 25px;\r\nclip:rect(30px, 60px, 200px, 0px);\r\nfont-size:0;\r\nleft:158px;\r\nline-height:0;\r\nposition:absolute;\r\ntop:-25px;\r\nwidth:0;\r\nz-index:300;\r\n}\r\n.e {\r\nbackground-color:#333333;\r\nheight:45px;\r\nleft:217px;\r\nposition:absolute;\r\nwidth:43px;\r\n}\r\n.e2 {\r\n-moz-border-radius:0 0 2px 0;\r\n-webkit-border-radius:0 0 2px 0;\r\nbackground-color:#eeeeee;\r\nheight:6px;\r\nleft:15px;\r\nposition:relative;\r\ntop:27px;\r\nwidth:28px;\r\n}\r\n.e3 {\r\n-moz-border-radius:0 2px 0 0;\r\n-webkit-border-radius:0 2px 0 0;\r\nbackground-color:#eeeeee;\r\nheight:5px;\r\nleft:15px;\r\nposition:relative;\r\ntop:4px;\r\nwidth:28px;\r\n}\r\n.s {\r\n-moz-border-radius:9px 0 9px 0;\r\n-webkit-border-radius:9px 0 9px 0;\r\nbackground-color:#333333;\r\nheight:45px;\r\nposition:absolute;\r\nright:85px;\r\nwidth:45px;\r\n}\r\n.s2 {\r\n-moz-border-radius:0 3px 3px 2px;\r\n-webkit-border-radius:0 3px 3px 2px;\r\nbackground-color:#eeeeee;\r\nheight:6px;\r\nposition:relative;\r\nright:0;\r\ntop:27px;\r\nwidth:25px;\r\n}\r\n.s3 {\r\n-moz-border-radius:3px 2px 0 3px;\r\n-webkit-border-radius:3px 2px 0 3px;\r\nbackground-color:#eeeeee;\r\nheight:6px;\r\nposition:relative;\r\nright:-20px;\r\ntop:5px;\r\nwidth:25px;\r\n}\r\n.ss {\r\n-moz-border-radius:9px 0 9px 0;\r\n-webkit-border-radius:9px 0 9px 0;\r\nbackground-color:#333333;\r\nheight:45px;\r\nposition:absolute;\r\nright:30px;\r\nwidth:45px;\r\n}\r\n.ss2 {\r\n-moz-border-radius:0 3px 3px 2px;\r\n-webkit-border-radius:0 3px 3px 2px;\r\nbackground-color:#eeeeee;\r\nheight:6px;\r\nposition:relative;\r\nright:0;\r\ntop:27px;\r\nwidth:25px;\r\n}\r\n.ss3 {\r\n-moz-border-radius:3px 2px 0 3px;\r\n-webkit-border-radius:3px 2px 0 3px;\r\nbackground-color:#eeeeee;\r\nheight:6px;\r\nposition:relative;\r\nright:-20px;\r\ntop:5px;\r\nwidth:25px;\r\n}\r\n<\/pre>\n<p>[ad#ad-3]<\/p>\n<h2>Download CSS Heart<\/h2>\n<p><strong>HTML &#038; CSS Code<\/strong><br \/>\n[download id=&#8221;5&#8243;]<\/p>\n<p>You can use these codes for personal and commercial projects at free of charge. What I only expect in return is your comments and backlinks, if you like it. You are not allowed to sell or redistribute the code anywhere else. If you like to share CSS Heart please link to this article.<br \/>\nDo not provide the direct download link nor upload these menus onto other servers for your own share, without my permission. If you want to spread the words, just link to this article.<\/p>\n<p><a rel=\"nofollow\" rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by\/2.5\/in\/\"><img decoding=\"async\" alt=\"Creative Commons License\" style=\"border-width:0\" src=\"http:\/\/i.creativecommons.org\/l\/by\/2.5\/in\/88x31.png\" \/><\/a><br \/><span xmlns:dc=\"http:\/\/purl.org\/dc\/elements\/1.1\/\" href=\"http:\/\/purl.org\/dc\/dcmitype\/StillImage\" property=\"dc:title\" rel=\"dc:type\">CSS Heart \u2013 Pure CSS Valenties Day Card &#8211; CSS Art<\/span> by <a xmlns:cc=\"http:\/\/creativecommons.org\/ns#\" href=\"https:\/\/deepubalan.com\" property=\"cc:attributionName\" rel=\"cc:attributionURL\">Deepu Balan<\/a> is licensed under a <a rel=\"nofollow\" rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by\/2.5\/in\/\">Creative Commons Attribution 2.5 India License<\/a>. Based on a work at <a xmlns:dc=\"http:\/\/purl.org\/dc\/elements\/1.1\/\" href=\"https:\/\/deepubalan.com\" rel=\"dc:source\">deepubalan.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Personally, I have never celebrated valentine\u2019s day in my life, in-fact I am completely against the idea of reserving days for our dear ones. Be it valentine\u2019s day, Mother\u2019s day&#8230;<\/p>\n","protected":false},"author":1,"featured_media":478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[5],"tags":[40,277,276,50],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/470"}],"collection":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/comments?post=470"}],"version-history":[{"count":0,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/470\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/media\/478"}],"wp:attachment":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/media?parent=470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/categories?post=470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/tags?post=470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}