{"id":2044,"date":"2014-12-27T07:57:38","date_gmt":"2014-12-27T07:57:38","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2044"},"modified":"2014-12-27T12:50:56","modified_gmt":"2014-12-27T12:50:56","slug":"how-to-make-attractive-tags-cloud-with-only-css","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/","title":{"rendered":"How to make attractive tags cloud with only CSS"},"content":{"rendered":"<p>Making a Tag Cloud based upon Cascading Style Sheets (CSS) is very simple, here is an example of tag cloud. Its only an outline and you need to modify it according to your needs. For example change colors, padding and margins etc to match with project layout. You can also see a working demo of this example at bottom.<\/p>\n<h2>CSS<\/h2>\n<pre lang=\"css\">\r\n\r\n\r\n.tag {\r\n\tfloat:left;\r\n}\r\n.tag ul {\r\n\tlist-style-type: none;\r\n}\r\n.tag ul li {\r\n\tfloat: left;\r\n\ttext-decoration: none;\r\n\tfont: bold 12px\/21px Arial, Tahoma, sans-serif;\r\n\ttext-decoration: none;\r\n\ttext-shadow: 0 1px rgba(255,255,255,0.4);\r\n}\r\n.style1{\r\n\tpadding: 7px 21px;\r\n\tmargin:5px 10px;\r\n\tbackground: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));\r\n\tbackground: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);\r\n\tbackground: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);\r\n\tbackground: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);\r\n\tbackground-color: #FEC95B;\r\n\tborder-top: 1px solid #EDB14A;\r\n\tborder-bottom: 1px solid #CE922E;\r\n\tborder-right: 1px solid #DCA03B;\r\n\tborder-left: 1px solid #DCA03B;\r\n\tborder-radius: 1px 3px 3px 1px;\r\n\tbox-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);\r\n\tcolor: #555;\r\n}\r\n.style2{\r\n\tpadding: 7px 21px;\r\n\tmargin:5px 10px;\r\n\tbackground: -moz-linear-gradient(top, #fb9d52 0%, #ed7228 100%);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));\r\n\tbackground: -webkit-linear-gradient(top, #fb9d52 0%,#ed7228 100%);\r\n\tbackground: -o-linear-gradient(top, #fb9d52 0%,#ed7228 100%);\r\n\tbackground: linear-gradient(to bottom, #fb9d52 0%,#ed7228 100%);\r\n\tbackground-color: #ff9a4a;\r\n\tborder-top: 1px solid #ff9a4a;\r\n\tborder-bottom: 1px solid #ff9a4a;\r\n\tborder-right: 1px solid #ff9a4a;\r\n\tborder-left: 1px solid #ff9a4a;\r\n\tborder-radius: 1px 3px 3px 1px;\r\n\tbox-shadow: inset 0 1px #ed7228, 0 1px 2px rgba(0,0,0,0.21);\r\n\tcolor: #eee;\r\n}\r\n.style3{\r\n\tpadding: 7px 21px;\r\n\tmargin:5px 10px;\r\n\tbackground: -moz-linear-gradient(top, #fef052 0%, #fed852 100%);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));\r\n\tbackground: -webkit-linear-gradient(top, #fef052 0%,#fed852 100%);\r\n\tbackground: -o-linear-gradient(top, #fef052 0%,#fed852 100%);\r\n\tbackground: linear-gradient(to bottom, #fef052 0%,#fed852 100%);\r\n\tbackground-color: #fcca1b;\r\n\tborder-top: 1px solid #f8c811;\r\n\tborder-bottom: 1px solid #fcca1b;\r\n\tborder-right: 1px solid #fcca1b;\r\n\tborder-left: 1px solid #fcca1b;\r\n\tborder-radius: 1px 3px 3px 1px;\r\n\tbox-shadow: inset 0 1px #fde72a, 0 1px 2px rgba(0,0,0,0.21);\r\n\tcolor: #222;\r\n}\r\n.tag ul li:hover {\r\n\tcolor: #fff;\r\n\tcursor:pointer;\r\n\ttext-shadow: -1px -1px 0 rgba(153,102,51,0.3);\r\n}\r\n\r\n\r\n<\/pre>\n<h2>HTML<\/h2>\n<pre lang=\"html\">\r\n\r\n\t<div class=\"tag\">\r\n\t<ul>\r\n\t\t<li class=\"style1\">Web Design<\/li>\r\n\t\t<li class=\"style2\">Photoshop<\/li>\r\n\t\t<li class=\"style1\">Adobe Reader<\/li>\r\n\t\t<li class=\"style2\">WordPress<\/li>\r\n\t\t<li class=\"style1\">Ajax<\/li>\r\n\t\t<li class=\"style2\">jQuery<\/li>\r\n\t\t<li class=\"style1\">Internet<\/li>\r\n\t<\/ul>\t\t\r\n\t<\/div>\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/css-tags.html\" target=\"_blank\">Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Making a Tag Cloud based upon Cascading Style Sheets (CSS) is very simple, here is an example of tag cloud. Its only an outline and you need to modify it according to your needs. For example change colors, padding and margins etc to match with project layout. You can also see a working demo of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67,101,86,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to make attractive tags cloud with only CSS - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make attractive tags cloud with only CSS - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Making a Tag Cloud based upon Cascading Style Sheets (CSS) is very simple, here is an example of tag cloud. Its only an outline and you need to modify it according to your needs. For example change colors, padding and margins etc to match with project layout. You can also see a working demo of [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-27T07:57:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-27T12:50:56+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"How to make attractive tags cloud with only CSS\",\"datePublished\":\"2014-12-27T07:57:38+00:00\",\"dateModified\":\"2014-12-27T12:50:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\"},\"wordCount\":72,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Inspiration\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\",\"name\":\"How to make attractive tags cloud with only CSS - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-27T07:57:38+00:00\",\"dateModified\":\"2014-12-27T12:50:56+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make attractive tags cloud with only CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"http:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make attractive tags cloud with only CSS - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/","og_locale":"en_US","og_type":"article","og_title":"How to make attractive tags cloud with only CSS - Vishmax.com","og_description":"Making a Tag Cloud based upon Cascading Style Sheets (CSS) is very simple, here is an example of tag cloud. Its only an outline and you need to modify it according to your needs. For example change colors, padding and margins etc to match with project layout. You can also see a working demo of [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-27T07:57:38+00:00","article_modified_time":"2014-12-27T12:50:56+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"How to make attractive tags cloud with only CSS","datePublished":"2014-12-27T07:57:38+00:00","dateModified":"2014-12-27T12:50:56+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/"},"wordCount":72,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Inspiration","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/","url":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/","name":"How to make attractive tags cloud with only CSS - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-27T07:57:38+00:00","dateModified":"2014-12-27T12:50:56+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/how-to-make-attractive-tags-cloud-with-only-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to make attractive tags cloud with only CSS"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"http:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2044"}],"collection":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2044"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2044\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2044"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}