{"id":1600,"date":"2015-09-03T14:59:20","date_gmt":"2015-09-03T14:59:20","guid":{"rendered":"http:\/\/photos-infographiste.com\/diario\/?p=1600"},"modified":"2018-07-31T15:01:06","modified_gmt":"2018-07-31T15:01:06","slug":"les-proprietes-css3-pour-votre-site-internet","status":"publish","type":"post","link":"https:\/\/photos-infographiste.com\/diario\/les-proprietes-css3-pour-votre-site-internet\/","title":{"rendered":"Propri\u00e9t\u00e9s css3"},"content":{"rendered":"<blockquote><p>Internet<\/p><\/blockquote>\n<h1>Op\u00e9ration &#8220;Relooking&#8221;<\/h1>\n<p><img src=\"http:\/\/photos-infographiste.com\/diario\/wp-content\/uploads\/2015\/09\/refonte-site-internet_250-175.jpg\" alt=\"cr\u00e9ation et refonte de sites internet responsive\" title=\"cr\u00e9ation et refonte de sites internet responsive\"width=\"250\" height=\"175\" class=\"aligncenter\" \/><\/p>\n<h3>Les propri\u00e9t\u00e9s CSS3<\/h3>\n<p>Les propri\u00e9t\u00e9s css3 ajoutent de nouveaux enrichissements graphiques.<\/br>Elles permettent ainsi de personnaliser et de donner un joli &#8220;look&#8221; \u00e0 votre site internet.<\/p>\n<p><!--more--><br \/>\n<div class=\"omsc-accordion\">\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">Border Radius<\/div><div class=\"omsc-toggle-inner\">\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:5%;-webkit-border-radius: 25px 25px 25px 25px;border-radius: 25px 25px 25px 25px;background-color:#DEDEDE;\">\n<h4>Un arrondi dans vos bo\u00eetes<\/h4>\n<p>Syntaxe&nbsp;: -webkit-border-radius: 25px 25px 25px 25px;<br \/>\nborder-radius: 25px 25px 25px 25px;<\/p>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">RGBA - Transparence - Bo\u00eete<\/div><div class=\"omsc-toggle-inner\">\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:5%;background-color:cyan;\">Bo\u00eete couleur cyan<\/div>\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:5%;background-color: rgba(255, 255, 0, 0.6);border-radius:100%;margin-top:-48px;width:80%;\">\n<h4>Effet de transparence &#8211; Bo\u00eete<\/h4>\n<p>Syntaxe&nbsp;: background-color: rgba(255, 255, 0, 0.7);\n<\/p>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">RGBA - Transparence - texte<\/div><div class=\"omsc-toggle-inner\">\n<img loading=\"lazy\" src=\"http:\/\/photos-infographiste.com\/diario\/wp-content\/uploads\/2015\/05\/8040744_800.jpg\" alt=\"photos-infographiste.com aime les hippopotames\" title=\"photos-infographiste.com aime les hippopotames\" width=\"800\" height=\"530\" class=\"aligncenter\" \/><\/p>\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:5% 0;margin-top:-400px;width:80%;\">\n<h5 style=\"color: rgba(255, 255, 255, 0.5);font-size:200%;\">\nMa vie d&#8217;hippopothame au zoo de Vincennes<\/br><br \/>\n<\/h5>\n<h4 style=\"color: rgba(255, 255, 255, 0.75);font-size:125%;\">Effet de transparence<br \/>Syntaxe&nbsp;: color: rgba(255, 255, 255, 0.5);<br \/><\/h4>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">Box Shadow<\/div><div class=\"omsc-toggle-inner\">\n<h4>Une ombre \u00e0 vos bo\u00eetes<\/h4>\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:2%;-webkit-border-radius: 25px 25px 25px 25px;border-radius: 25px 25px 25px 25px;background-color:#E6E6E6;-webkit-box-shadow: 5px 5px 5px 5px rgba(66,66,66,0.25);box-shadow: 5px 5px 5px 5px rgba(66,66,66,0.25);margin-bottom:25px;\">\n<h4>Outset<\/h4>\n<p>Syntaxe&nbsp;: -webkit-box-shadow: 5px 5px 5px 5px rgba(66,66,66,0.25); box-shadow: 5px 5px 5px 5px rgba(66,66,66,0.25);<\/p>\n<\/div>\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:2%;-webkit-border-radius: 25px 25px 25px 25px;border-radius: 25px 25px 25px 25px;background-color:#b6d6c6;-webkit-box-shadow:inset 5px 5px 5px 8px rgba(222,222,222,1);box-shadow:inset 5px 5px 5px 8px rgba(222,222,222,1);\">\n<h4>Inset<\/h4>\n<p>Syntaxe&nbsp;: -webkit-box-shadow:inset 5px 5px 5px 8px rgba(222,222,222,1);<br \/>\nbox-shadow:inset 5px 5px 5px 8px rgba(222,222,222,1);<\/p>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">Text shadow<\/div><div class=\"omsc-toggle-inner\">\n<div>\n<h4>Une ombre \u00e0 vos textes<\/h4>\n<p style=\"text-shadow: 0 1px 0 #FFF700;font-size:110%;\">\nOmbre texte : Syntaxe : text-shadow: 0 1px 0 #FFF700;<\/p>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">Plusieurs colonnes<\/div><div class=\"omsc-toggle-inner\">\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:5%;background-color:none;\">\n<p style=\"-moz-column-count: 2;-moz-column-gap: 25px;-webkit-column-count: 2;\n-webkit-column-gap: 25px;column-count: 2;column-gap: 25px; text-align:left;color:#666;\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/p>\n<p>Syntaxe: -moz-column-count: 2;<br \/>\n-moz-column-gap: 25px;<br \/>\n-webkit-column-count: 2;<br \/>\n-webkit-column-gap: 25px;<br \/>\ncolumn-count:<br \/>\n2;column-gap: 25px;<\/p>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">Outline<\/div><div class=\"omsc-toggle-inner\">\n<div style=\"box-sizing:border-box;margin:auto;text-align:center;padding:3%;-background-color:#F6F6F6;outline: 10px outset #FF17A2;\noutline-offset: 2px;\"><\/p>\n<h4>Une bordure personnalis\u00e9e \u00e0 vos bo\u00eetes<\/h4>\n<p>Syntaxe&nbsp;: outline: 10px outset #FF17A2;<br \/>\noutline-offset: 2px;<\/p>\n<p>Plusieurs options&nbsp;: outset (ici), dotted, dashed, solid, groove, ridge, inset, double, auto<\/p>\n<\/div>\n<\/div><\/div>\n<div class=\"omsc-toggle\"><div class=\"omsc-toggle-title\">Gradient (les d\u00e9grad\u00e9s)<\/div><div class=\"omsc-toggle-inner\">\n<div class=\"main-navigation\">\n<h4>\n<p>Appliquer des d\u00e9grad\u00e9s \u00e0 vos bo\u00eetes<\/p>\n<p><\/h4>\n<\/div>\n<\/div><\/div>\n<\/div>\n<h4>Ressources<\/h4>\n<p>Il est possible de combiner les propri\u00e9t\u00e9s ci-dessus.<\/p>\n<ul>\n<li>Pour tester et faire vos r\u00e9glages et g\u00e9n\u00e9rer le code, une lien tr\u00e8s pratique&nbsp;: <a href=\"http:\/\/css3generator.com\/\" target=\"_blank\" title=\"g\u00e9n\u00e9rer des propri\u00e9t\u00e9s CSS3 en ligne\">css3Generator<\/a><\/li>\n<li>Pour les d\u00e9grad\u00e9s et g\u00e9n\u00e9rer le code, tr\u00e8s pratique \u00e9galement&nbsp;: <a href=\"http:\/\/www.colorzilla.com\/gradient-editor\/\" target=\"_blank\" title=\"cr\u00e9er des d\u00e9grad\u00e9s en ligne\">colorzilla.com\/gradient-editor\/<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<blockquote><p>Vous aimez cet article, merci de le partager<\/p><\/blockquote>\n<p><!-- AddThis Button BEGIN --><\/p>\n<div class=\"addthis_toolbox addthis_default_style addthis_24x24_style\"><a class=\"addthis_button_email\"><\/a><a class=\"addthis_button_facebook\"><\/a><a class=\"addthis_button_twitter\"><\/a><a class=\"addthis_button_pinterest_share\"><\/a><a class=\"addthis_button_google_plusone_share\"><\/a><a class=\"addthis_button_compact\"><\/a><\/div>\n<p><script type=\"text\/javascript\" src=\"http:\/\/s7.addthis.com\/js\/300\/addthis_widget.js#pubid=undefined\"><\/script><br \/>\n<!-- AddThis Button END --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Internet Op\u00e9ration &#8220;Relooking&#8221; Les propri\u00e9t\u00e9s CSS3 Les propri\u00e9t\u00e9s css3 ajoutent de nouveaux enrichissements graphiques.Elles permettent ainsi de personnaliser et de donner un joli &#8220;look&#8221; \u00e0 votre site internet.<\/p>\n","protected":false},"author":1,"featured_media":1661,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"chat","meta":[],"categories":[3,4],"tags":[],"_links":{"self":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts\/1600"}],"collection":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/comments?post=1600"}],"version-history":[{"count":82,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts\/1600\/revisions"}],"predecessor-version":[{"id":4207,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/posts\/1600\/revisions\/4207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/media\/1661"}],"wp:attachment":[{"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/media?parent=1600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/categories?post=1600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/photos-infographiste.com\/diario\/wp-json\/wp\/v2\/tags?post=1600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}