tag:blogger.com,1999:blog-51287657842366397592024-02-18T18:37:22.631-08:00For StylesAnonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.comBlogger592125tag:blogger.com,1999:blog-5128765784236639759.post-50755508295151156092012-05-05T15:57:01.183-07:002012-05-05T15:57:20.899-07:00utilisez html et css facilement <div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="color: #333333; font-family: 'Gill Sans MT', 'Gill Sans', GillSans, Arial, Helvetica, sans-serif; line-height: 20px;"></span><br /><div class="section" id="HTML" style="clear: both;"><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">L'étape 1 est d'ouvrir votre éditeur de texte (Notepad, TextEdit, KEdit, etc., quel que soit votre éditeur favori), de commencer avec une fenêtre vide et de taper ceci:</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /></head><br /><br /><body><br /><br /><!-- Menu de navigation du site --><br /><ul class="navbar"><br /> <li><a href="http://c-lien.blogspot.com/?aW5kZXguaHRtbA==">Home page</a><br /> <li><a href="http://c-lien.blogspot.com/?cmVmbGV4aW9ucy5odG1s">Réflexions</a><br /> <li><a href="http://c-lien.blogspot.com/?dmlsbGUuaHRtbA==">Ma ville</a><br /> <li><a href="http://c-lien.blogspot.com/?bGllbnMuaHRtbA==">Liens</a><br /></ul><br /><br /><!-- Contenu principal --><br /><h1>Ma première page avec du style</h1><br /><br /><p>Bienvenue sur ma page avec du style! <br /><br /><p>Il lui manque des images, mais au moins, elle a du style. Et elle a desliens, même s'ils ne mènent nulle part...<br />&hellip;<br /><br /><p>Je devrais étayer, mais je ne sais comment encore.<br /><br /><!-- Signer et dater la page, c'est une question de politesse! --><br /><address>Fait le 5 avril 2004<br><br /> par moi.</address><br /><br /></body><br /></html></pre><div style="margin-bottom: 0px; margin-top: 1em;">En fait, vous n'avez pas à le taper: vous pouvez le copier et coller depuis cette page Web dans votre éditeur.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">(Si vous utilisez TextEdit sur Mac, n'oubliez pas de dire à TextEdit qu'il s'agit de texte simple; pour ceci, allez au menu Format et sélectionnez "Convertir au format Texte".)</div><div class="advanced" style="font-size: smaller; margin-bottom: 1em; margin-left: 5em; margin-right: 0px; margin-top: 1em;"><div style="margin-bottom: 0px; margin-top: 1em;"><img alt="Attention! Explication avancée:" class="sign" src="http://www.w3.org/Style/Examples/011/gevaar.png" style="float: left; margin-bottom: 0.5em; margin-left: -5em; margin-right: 0.5em; margin-top: 0px; max-width: 4.5em;" />La première ligne du fichier HTML ci-dessus dit au navigateur de quel type d'HTML il s'agit (DOCTYPE signifie DOCument TYPE). Dans ce cas, il s'agit de la version 4.01 d'HTML.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Les mots à l'intérieur de < et > sont nommés <em>balises</em> et comme vous pouvez le voir, le document est contenu à l'intérieur des balises <html> et </html>. Entre <head> et </head> se trouve la place pour des informations variées qui ne sont pas affichées à l'écran. A ce stade, il contient le titre du document, mais plus tard, nous y ajouterons la feuille de style CSS.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Le <body> est l'emplacement du texte à proprement parler de notre document. En principe, tout ce qui s'y trouve sera affiché, à l'exception du texte contenu entre entre <!-- et -->, qui sert de commentaire pour nous-même. Le navigateur ignorera ce texte.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Parmi les balises de l'exemple, <ul> introduit une "Liste non ordonnée", c'est à dire une liste dans laquelle les éléments ne sont pas numérotés. La balise <li> est le début d'un "élément de liste ". Le <p> est un "paragraphe". Et le <a> est une "ancre", ce qui crée un hyperlien.</div></div><div class="figure"><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 1em; text-align: center; text-indent: 0px;"><img alt="le code source HTML affiché par Subethaedit" src="http://www.w3.org/Style/Examples/011/capture.png" style="max-width: 90%;" /></div><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 0px; text-align: center; text-indent: 0px;">L'éditeur Subethaedit affichant le code source HTML.</div></div><div class="advanced" style="font-size: smaller; margin-bottom: 1em; margin-left: 5em; margin-right: 0px; margin-top: 1em;"><div style="margin-bottom: 0px; margin-top: 1em;"><img alt="Attention! Explication avancée:" class="sign" src="http://www.w3.org/Style/Examples/011/gevaar.png" style="float: left; margin-bottom: 0.5em; margin-left: -5em; margin-right: 0.5em; margin-top: 0px; max-width: 4.5em;" />Si vous désirez connaître la signification du contenu d'un <…>, je vous recommande de commencer avec <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy53My5vcmcvTWFya1VwL0d1aWRlLw==" hreflang="en" style="color: #003377;"><cite>Getting started with HTML.</cite></a> Mais permettez-moi de vous livrer quelques mots sur la structure de la page HTML en exemple.</div><ul style="margin-left: 1.5em; margin-right: 0px; padding-left: 0px; padding-right: 0px;"><li style="margin-bottom: 1.2em; margin-left: 0px; margin-right: 0px; margin-top: 1.2em; padding-left: 0px;">Le "ul" est une liste avec un hyperlien par élément. Cela nous servira de "menu de navigation de site," nous créerons des liens vers les autres pages de notre (hypothétique) site Web. Nous présumons que toutes les pages sur notre site ont un menu similaire.</li><li style="margin-bottom: 1.2em; margin-left: 0px; margin-right: 0px; margin-top: 1.2em; padding-left: 0px;">Les éléments "h1" et "p" forment le contenu unique de cette page, et la signature en bas ("address") sera similaire sur toutes les pages du site.</li></ul><div style="margin-bottom: 0px; margin-top: 1em;">Notez que je n'ai pas fermé les éléments "li" et "p". En langage HTML (mais pas en XHTML), il est permis d'omettre les balises </li> et </p>, ce que j'ai fait là, afin de rendre le texte un peu plus facile à lire. Mais vous pouvez les ajouter, si vous préférez.</div></div><div style="margin-bottom: 0px; margin-top: 1em;">Admettons qu'il s'agira d'une page d'un site Web contenant plusieurs pages similaires. Comme dans beaucoup de pages Web actuelles, celle-ci a un menu avec des liens vers d'autres pages de notre site hypothétique, un contenu unique ainsi qu'une signature.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Sélectionnez maintenanttenant "Sauver-sous…" depuis votre menu Fichier, naviguez vers le répertoire/dossier où vous voulez sauver votre fichier (le Bureau est tout à fait convenable) et sauvez le fichier sous le nom "mapage.html". Ne fermez pas l'éditeur car nous en aurons encore besoin.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">(Si vous utilisez TextEdit sur Mac OS X avant version 10.4, vous voyez une option pour ne pas ajouter l'extension .txt. Selectionnez cette option, parce que "mapage.html" a déjà une extension. Les versions plus récentes de TextEdit remarquent l'extension .html automatiquement.)</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Ensuite, ouvrez le fichier dans un navigateur. Vous pouvez faire cela comme suit: cherchez le fichier avec votre explorateur de fichiers (Explorateur Windows, Finder ou Konqueror) et cliquez ou double-cliquez sur le fichier "mapage.html". Il devrait s'ouvrir dans votre navigateur Web par défaut. (Si ce n'est pas le cas, ouvrez votre navigateur et cliquez-déplacez le fichier dans le navigateur.)</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Comme vous pouvez le voir, la page est assez ennuyeuse…</div></div><div class="section" id="couleurs" style="clear: both;"><h2 style="border-bottom-color: initial; border-bottom-style: solid; border-bottom-width: thin; clear: both; color: #aaaa77; font-weight: bold; line-height: 1; margin-top: 3em; padding-bottom: 0.2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-transform: uppercase;">ETAPE 2: AJOUTER DE LA COULEUR</h2><div style="margin-bottom: 0px; margin-top: 1em;">Vous voyez probablement du texte noir sur un fond blanc, mais cela dépend de la façon dont le navigateur est configuré. Une manière simple de rendre la page plus stylée et d'y ajouter des couleurs. (Laissez votre navigateur ouvert, nous l'utiliserons à nouveau plus tard.)</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Nous allons commencer avec une feuille de style intégrée dans le fichier HTML. Par la suite, nous nous mettrons le HTML et le CSS dans des fichiers séparés. Séparer les fichiers est une bonne chose car cela vous permet facilement d'utiliser la même feuille de style sur plusieurs fichiers HTML: il vous suffit d'écrire votre feuille de style une fois. Mais pour cette cette étape, nous écrirons tout dans notre seul fichier.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Nous devons ajouter un élément <style> au fichier HTML. La feuille de style sera dans cet élément. Retournez à la fenêtre de votre éditeur et ajoutez les cinq lignes suivantes dans la partie head de votre fichier HTML. Les lignes à ajouter sont affichées en rouge.</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /> <strong style="color: red;"><style type="text/css"><br /> body {<br /> color: purple;<br /> background-color: #d8da3d }<br /> </style></strong><br /></head><br /><br /><body><br />[etc.]</pre><div style="margin-bottom: 0px; margin-top: 1em;">La première ligne indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS ("text/css"). La seconde ligne indique que nous ajoutons du style à l'élément "body". La troisième ligne indique que la couleur du texte sera le violet, et la ligne suivante que le fond aura comme couleur une sorte de jaune verdâtre.</div><div class="advanced" style="font-size: smaller; margin-bottom: 1em; margin-left: 5em; margin-right: 0px; margin-top: 1em;"><div style="margin-bottom: 0px; margin-top: 1em;"><img alt="Attention! Explication avancée:" class="sign" src="http://www.w3.org/Style/Examples/011/gevaar.png" style="float: left; margin-bottom: 0.5em; margin-left: -5em; margin-right: 0.5em; margin-top: 0px; max-width: 4.5em;" />Les feuilles de style en CSS sont constituées de <em>règles</em>. Chacune des règles est en trois partie:</div><ol style="margin-left: 1.5em; margin-right: 0px; padding-left: 0px; padding-right: 0px;"><li style="margin-bottom: 1.2em; margin-left: 0px; margin-right: 0px; margin-top: 1.2em; padding-left: 0px;">Le <em>sélecteur</em> (dans l'exemple: "body"), qui indique au navigateur quelle partie du document est affectée par la règle;</li><li style="margin-bottom: 1.2em; margin-left: 0px; margin-right: 0px; margin-top: 1.2em; padding-left: 0px;">La <em>propriété</em> (dans l'exemple, 'color' et 'background-color' sont des propriétés), qui spécifie quel aspect de l'affichage est paramétré</li><li style="margin-bottom: 1.2em; margin-left: 0px; margin-right: 0px; margin-top: 1.2em; padding-left: 0px;">Et la <em>valeur</em> ('purple' et '#d8da3d'), qui indique la valeur de la propriété de style.</li></ol><div style="margin-bottom: 0px; margin-top: 1em;">L'exemple montre que les règles peuvent être combinées. Nous avons paramétré deux propriétés, donc nous aurions pu en faire deux règles séparées:</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;">body { color: purple }<br />body { background-color: #d8da3d }</pre><div style="margin-bottom: 0px; margin-top: 1em;">mais puisque les deux règles affectent le corps ("body"), nous avons indiqué "body" une seule fois et mis les propriétés et valeurs ensemble. Pour en savoir plus sur les sélecteurs, se reporter au <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy53My5vcmcvU3R5bGUvTGllQm9zMmUvZW50ZXIv" hreflang="en" style="color: #003377;">chapitre 2</a> de <cite>Lie & Bos</cite>.</div></div><div style="margin-bottom: 0px; margin-top: 1em;">Le fond de l'élément "body" sera également le fond de tout le document. Nous n'avons pas donné aux autres éléments (p, li, address…) de valeur explicite sur le fond, donc par défaut, ils n'en auront pas (ou plutôt: ils seront transparents). La propriété 'color' détermine la couleur du texte de l'élément "body", mais tous les autres éléments dans le corps hériteront de cette couleur, à moins qu'une autre soit spécifiée (Nous ajouterons d'autres couleurs plus plus tard.)</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Sauvez maintenant ce fichier (utilisez "Sauver" depuis le menu Fichier) et retournez à la fenêtre de votre navigateur. Si vous pressez l'icône "Recharger", l'affichage devrait changer de la page "ennuyeuse" à une page colorée (mais certes toujours ennuyeuse) A part la liste de liens en haut, le texte devrait maintenant être violet sur un fond jaune verdâtre.</div><div class="figure"><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 1em; text-align: center; text-indent: 0px;"><img alt="Capture d'écran de la page colorée dans Amaya" src="http://www.w3.org/Style/Examples/011/capture2.png" style="max-width: 90%;" /></div><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 0px; text-align: center; text-indent: 0px;">Voici comment un navigateur affiche la page maintenant que des couleurs ont été ajoutéees.</div></div><div class="advanced" style="font-size: smaller; margin-bottom: 1em; margin-left: 5em; margin-right: 0px; margin-top: 1em;"><div style="margin-bottom: 0px; margin-top: 1em;"><img alt="Attention! Explication avancée:" class="sign" src="http://www.w3.org/Style/Examples/011/gevaar.png" style="float: left; margin-bottom: 0.5em; margin-left: -5em; margin-right: 0.5em; margin-top: 0px; max-width: 4.5em;" /><img alt="" class="illustration" src="http://www.w3.org/Style/CSS/colors" style="float: right; margin-bottom: 0.5em; margin-left: 0.5em; margin-right: 0px; margin-top: 0.5em;" />En CSS, les couleurs peuvent être spécifiées de plusieurs manières. Cet exemple en montre deux: par nom ("purple") et par code hexadécimal ("#d8da3d"). Il y a à peu prés 140 noms de couleurs. Les codes hexadécimaux permettent plus de 16 millions de couleurs. <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy53My5vcmcvTWFya1VwL0d1aWRlL1N0eWxl" style="color: #003377;"><cite>Adding a touch of style</cite></a> fournit plus d'explications à propos de ces codes.</div></div></div><div class="section" id="fontes" style="clear: both;"><h2 style="border-bottom-color: initial; border-bottom-style: solid; border-bottom-width: thin; clear: both; color: #aaaa77; font-weight: bold; line-height: 1; margin-top: 3em; padding-bottom: 0.2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-transform: uppercase;">ETAPE 3: AJOUTER DES FONTES</h2><div style="margin-bottom: 0px; margin-top: 1em;">Une autre chose simple à faire est de distinguer les fontes des différents éléments de la page. Choisissons la fonte "Georgia", sauf pour le texte des titres de type h1 pour lesquels nous choisirons la fonte "Helvetica."</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Sur le Web, vous ne pouvez jamais être sûr des fontes qu'auront vos lecteurs sur leurs ordinateurs, donc nous ajouterons des alternatives: si Georgia n'est pas disponible, Times New Roman ou Times iront très bien, et si ces deux-la sont également indisponibles, le navigateur pourra utiliser une autre fonte dans la famille <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy5tLXcuY29tL2NnaS1iaW4vZGljdGlvbmFyeT9ib29rPURpY3Rpb25hcnkmYW1wO2FtcDt2YT1zZXJpZg==" hreflang="en" style="color: #003377;">serifs.</a> Si Helvetica est absente, Geneva, Arial et SunSans-Regular sont assez similaire en forme, et si aucune de celles-ci ne fonctionne, le navigateur pourra choisir une autre fonte sans serif.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Dans votre éditeur de texte, ajoutez les lignes suivantes :</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /> <style type="text/css"><br /> body {<br /> <strong style="color: red;">font-family: Georgia, "Times New Roman",<br /> Times, serif;</strong><br /> color: purple;<br /> background-color: #d8da3d }<br /> <strong style="color: red;">h1 {<br /> font-family: Helvetica, Geneva, Arial,<br /> SunSans-Regular, sans-serif }</strong><br /> </style><br /></head><br /><br /><body><br />[etc.]</pre><div style="margin-bottom: 0px; margin-top: 1em;">Si vous sauvez à nouveau et pressez "Recharger" dans le navigateur, vous devriez voir des fontes différentes pour le titre et le reste du texte.</div><div class="figure"><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 1em; text-align: center; text-indent: 0px;"><img alt="Capture d'écran avec les fontes ajoutées" src="http://www.w3.org/Style/Examples/011/capture3.png" style="max-width: 90%;" /></div><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 0px; text-align: center; text-indent: 0px;">Maintenant le texte principal a une fonte différente de celle du titre.</div></div></div><div class="section" id="navbar" style="clear: both;"><h2 style="border-bottom-color: initial; border-bottom-style: solid; border-bottom-width: thin; clear: both; color: #aaaa77; font-weight: bold; line-height: 1; margin-top: 3em; padding-bottom: 0.2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-transform: uppercase;">ETAPE 4: LA BARRE DE NAVIGATION</h2><div style="margin-bottom: 0px; margin-top: 1em;">La liste en haut de la page HTML est sensée devenir un menu de navigation. Beaucoup de sites Web ont une sorte de menu en haut ou sur le côté de la page, et notre page devrait en avoir un aussi. Nous le mettrons du côté gauche, parce que c'est un peu plus intéressant qu'en haut…</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Le menu est déjà dans la page HTML. Il s'agit de la liste <ul> en haut. Les liens à l'intérieur ne fonctionnent pas, puisque notre notre "site Web" consiste en une seule page, jusqu'à présent, donc ceci importe peu. Dans un site Web réel, il ne devrait pas y avoir de lien cassé, évidemment.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Nous devons donc déplacer la liste à gauche, et le reste du texte un petit peu à droite, pour faire de la place pour notre menu. Les propriétés CSS que nous utiliserons pour cela sont 'padding-left' (pour déplacer le texte du corps) et 'position', 'left' et 'top' (pour déplacer le menu).</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Il y a d'autres manières de le faire. Si vous recherchez "column" ou "layout" dans la page <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy53My5vcmcvU3R5bGUvQ1NTL2xlYXJuaW5n" style="color: #003377;"><cite>Learning CSS</cite></a>, vous trouverez plusieurs modèles prêt à l'emploi. Mais cette manière convient à nos besoins.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Dans la fenêtre d'édition, ajoutez les lignes suivantes au fichier HTML :</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /> <style type="text/css"><br /> body {<br /> <strong style="color: red;">padding-left: 11em;</strong><br /> font-family: Georgia, "Times New Roman",<br /> Times, serif;<br /> color: purple;<br /> background-color: #d8da3d }<br /> <strong style="color: red;">ul.navbar {<br /> position: absolute;<br /> top: 2em;<br /> left: 1em;<br /> width: 9em }</strong><br /> h1 {<br /> font-family: Helvetica, Geneva, Arial,<br /> SunSans-Regular, sans-serif }<br /> </style><br /></head><br /><br /><body><br />[etc.]</pre><div style="margin-bottom: 0px; margin-top: 1em;">Si vous sauvez encore et rechargez la page dans votre navigateur, vous devriez maintenant avoir la liste de liens à gauche du texte principal. C'est déjà bien plus intéressant, n'est-ce pas?</div><div class="figure"><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 1em; text-align: center; text-indent: 0px;"><img alt="Capture d'écran avec le menu à gauche" src="http://www.w3.org/Style/Examples/011/capture4.png" style="max-width: 90%;" /></div><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 0px; text-align: center; text-indent: 0px;">Le texte principal a été déplacé à droite et la liste de liens est maintenant à sa gauche au lieu d'être au-dessus.</div></div><div class="advanced" style="font-size: smaller; margin-bottom: 1em; margin-left: 5em; margin-right: 0px; margin-top: 1em;"><div style="margin-bottom: 0px; margin-top: 1em;"><img alt="Attention! Explication avancée:" class="sign" src="http://www.w3.org/Style/Examples/011/gevaar.png" style="float: left; margin-bottom: 0.5em; margin-left: -5em; margin-right: 0.5em; margin-top: 0px; max-width: 4.5em;" />'position: absolute' précise que l'élément ul est positionné de façon indépendante de tout texte qui vient avant ou après dans le document, et 'left' et 'top' indiquent quelle est cette position. Dans ce cas, 2em depuis le haut et 1em depuis le côté gauche de cette fenêtre.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">'2em' signifie 2 fois la taille de la fonte courante. C'est à dire que si le menu est affiché avec une fonte de 12 points, '2em' font 24 points. L'unité 'em' est très utile en CSS puisqu'elle peut s'adapter automatiquement à la fonte que le lecteur utilise. La plupart des navigateurs ont un menu pour agrandir et réduire la taille de fonte: vous pouvez l'essayer et voir comment la taille du menu augmente dès que la fonte grossit, ce qui n'aurait pas été le cas si nous avions utilisé une taille en pixels à la place.</div></div></div><div class="section" id="liens" style="clear: both;"><h2 style="border-bottom-color: initial; border-bottom-style: solid; border-bottom-width: thin; clear: both; color: #aaaa77; font-weight: bold; line-height: 1; margin-top: 3em; padding-bottom: 0.2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-transform: uppercase;">ETAPE 5: STYLISEZ VOS LIENS</h2><div style="margin-bottom: 0px; margin-top: 1em;">Le menu de navigation ressemble toujours à une liste au lieu d'un menu. Ajoutons un peu de style. Nous allons supprimer les points de la liste et déplacer les éléments à gauche, à l'endroit où étaient les points. Nous allons aussi donner à chaque élément son propre fond blanc ainsi qu'un carré noir. (Pourquoi? Aucune raison en particulier, si ce n'est que l'on peut le faire.)</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Nous n'avons pas déterminé quelle couleur auront les liens, alors nous ajouterons cela également: bleu pour les liens que l'utilisateur n'a pas encore vu et violet pour les liens déjà visités :</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /> <style type="text/css"><br /> body {<br /> padding-left: 11em;<br /> font-family: Georgia, "Times New Roman",<br /> Times, serif;<br /> color: purple;<br /> background-color: #d8da3d }<br /> ul.navbar {<br /> <strong style="color: red;">list-style-type: none;<br /> padding: 0;<br /> margin: 0;</strong><br /> position: absolute;<br /> top: 2em;<br /> left: 1em;<br /> width: 9em }<br /> h1 {<br /> font-family: Helvetica, Geneva, Arial,<br /> SunSans-Regular, sans-serif }<br /> <strong style="color: red;">ul.navbar li {<br /> background: white;<br /> margin: 0.5em 0;<br /> padding: 0.3em;<br /> border-right: 1em solid black }<br /> ul.navbar a {<br /> text-decoration: none }<br /> a:link {<br /> color: blue }<br /> a:visited {<br /> color: purple }</strong><br /> </style><br /></head><br /><br /><body><br />[etc.]</pre><div class="advanced" style="font-size: smaller; margin-bottom: 1em; margin-left: 5em; margin-right: 0px; margin-top: 1em;"><div style="margin-bottom: 0px; margin-top: 1em;"><img alt="Attention! Explication avancée:" class="sign" src="http://www.w3.org/Style/Examples/011/gevaar.png" style="float: left; margin-bottom: 0.5em; margin-left: -5em; margin-right: 0.5em; margin-top: 0px; max-width: 4.5em;" />Traditionellement, les navigateurs montrent les hyperliens soulignés et en couleurs. Habituellement, les couleurs sont similaires à celles que nous avons spécifiées ici: bleu pour les liens vers des pages qui n'ont pas encore été visitées (ou visitées il y a longtemps), violet pour les pages qui ont été déjà visitées.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">En HTML, les hyperliens sont créés avec l'élément <a>, donc pour préciser la couleur, nous devons ajouter une règle de style pour "a". Afin de différencier les liens visités et les liens non visités, CSS propose deux "pseudo-classes" (:link et :visited). Elles sont appelées "pseudo-classes" pour les distinguer des classes <em>attributs,</em> qui apparaissent directement dans le HTML, c'est à dire, la classe <code>class="navbar"</code> dans notre exemple.</div></div></div><div class="section" id="ligne" style="clear: both;"><h2 style="border-bottom-color: initial; border-bottom-style: solid; border-bottom-width: thin; clear: both; color: #aaaa77; font-weight: bold; line-height: 1; margin-top: 3em; padding-bottom: 0.2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-transform: uppercase;">ETAPE 6: LIGNE HORIZONTALE</h2><div style="margin-bottom: 0px; margin-top: 1em;">L'ajout final à notre feuille de style est une ligne horizontale pour séparer le texte de la signature en bas. Nous utiliserons 'border-top' afin d'ajouter une ligne en pointillé au-dessus de l'élément <address> :</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /> <style type="text/css"><br /> body {<br /> padding-left: 11em;<br /> font-family: Georgia, "Times New Roman",<br /> Times, serif;<br /> color: purple;<br /> background-color: #d8da3d }<br /> ul.navbar {<br /> list-style-type: none;<br /> padding: 0;<br /> margin: 0;<br /> position: absolute;<br /> top: 2em;<br /> left: 1em;<br /> width: 9em }<br /> h1 {<br /> font-family: Helvetica, Geneva, Arial,<br /> SunSans-Regular, sans-serif }<br /> ul.navbar li {<br /> background: white;<br /> margin: 0.5em 0;<br /> padding: 0.3em;<br /> border-right: 1em solid black }<br /> ul.navbar a {<br /> text-decoration: none }<br /> a:link {<br /> color: blue }<br /> a:visited {<br /> color: purple }<br /> <strong style="color: red;">address {<br /> margin-top: 1em;<br /> padding-top: 1em;<br /> border-top: thin dotted }</strong><br /> </style><br /></head><br /><br /><body><br />[etc.]</pre><div style="margin-bottom: 0px; margin-top: 1em;">Notre style est désormais terminé. Maintenant, penchons-nous sur comment faire de notre feuille de style un fichier à part, de sorte que d'autres pages peuvent partager le même style.</div></div><div class="section" id="externe" style="clear: both;"><h2 style="border-bottom-color: initial; border-bottom-style: solid; border-bottom-width: thin; clear: both; color: #aaaa77; font-weight: bold; line-height: 1; margin-top: 3em; padding-bottom: 0.2em; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-transform: uppercase;">ETAPE 7: METTRE LA FEUILLE DE STYLE DANS UN FICHIER À PART</h2><div style="margin-bottom: 0px; margin-top: 1em;">Nous disponsons d'un fichier HTML avec une feuille de style intégrée. Mais si notre site se développe, nous voulons probablement que plusieurs pages partagent le même style. Il existe une meilleure méthode que de copier la feuille de style dans chaque page: si nous mettons la feuille de style dans un fichier à part, toutes les pages peuvent pointer sur celui-ci.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Pour créer un fichier de feuille de style, nous devons créer un autre fichier texte vide. Vous pouvez sélectionner "Nouveau" depuis le menu Fichier de votre éditeur pour obtenir une fenêtre vide. (Si vous utilisez TextEdit, n'oubliez pas de forcer le texte simple à nouveau, en utilisant le menu Format.)</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Ensuite, coupez et collez le contenu de l'élément <style> depuis le fichier HTML vers la nouvelle fenêtre. Ne copiez pas les éléments <style> et </style>. Ils appartiennent au langage HTML, pas à CSS. Dans la nouvelle fenêtre d'édition, vous devriez maintenant avoir la feuille de style complète:</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;">body {<br /> padding-left: 11em;<br /> font-family: Georgia, "Times New Roman",<br /> Times, serif;<br /> color: purple;<br /> background-color: #d8da3d }<br />ul.navbar {<br /> list-style-type: none;<br /> padding: 0;<br /> margin: 0;<br /> position: absolute;<br /> top: 2em;<br /> left: 1em;<br /> width: 9em }<br />h1 {<br /> font-family: Helvetica, Geneva, Arial,<br /> SunSans-Regular, sans-serif }<br />ul.navbar li {<br /> background: white;<br /> margin: 0.5em 0;<br /> padding: 0.3em;<br /> border-right: 1em solid black }<br />ul.navbar a {<br /> text-decoration: none }<br />a:link {<br /> color: blue }<br />a:visited {<br /> color: purple }<br />address {<br /> margin-top: 1em;<br /> padding-top: 1em;<br /> border-top: thin dotted }</pre><div style="margin-bottom: 0px; margin-top: 1em;">Choisissez "Sauver-sous…" depuis le menu Fichier, assurez-vous que vous êtes dans le même répertoire/dossier où vous avez enregistré le fichier mapage.html, et sauvez la feuille de style sous le nom "monstyle.css".</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Revenez maintenant à la fenêtre contenant le code HTML. Supprimez tout depuis la balise <style> jusqu'après la balise </style> et remplacez par l'élément <link> comme suit :</div><pre style="background-attachment: initial; background-clip: initial; background-color: #dddddd; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; padding-bottom: 0.5em; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.5em; text-align: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><br /><html><br /><head><br /> <title>Ma première page avec du style</title><br /> <strong style="color: red;"><link rel="stylesheet" href="http://c-lien.blogspot.com/?bW9uc3R5bGUuY3Nz"></strong><br /></head><br /><br /><body><br />[etc.]</pre><div style="margin-bottom: 0px; margin-top: 1em;">Ceci indiquera au navigateur que la feuille de style se trouve dans le fichier nommé "monstyle.css" et puisqu'aucun répertoire n'est mentionné, le navigateur regardera dans le même répertoire que le fichier HTML.</div><div style="margin-bottom: 0px; margin-top: 0px; text-indent: 1.5em;">Si vous sauvez votre fichier HTML et le rechargez dans votre navigateur, vous ne devriez voir aucun changement: la page a toujours le même style, mais celui-ci provient maintenant d'un fichier externe.</div><div class="figure"><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 1em; text-align: center; text-indent: 0px;"><img alt="Résultat final du style" src="http://www.w3.org/Style/Examples/011/capture5.png" style="max-width: 90%;" /></div><div style="font-size: smaller; font-style: italic; margin-bottom: 0px; margin-top: 0px; text-align: center; text-indent: 0px;">Le résultat final</div></div><div style="margin-bottom: 0px; margin-top: 1em;">L'étape suivante est d'enregistrer les deux fichiers mapage.html et monstyle.css sur votre site Web. (Probablement après les avoir modifié un peu au préalable…) Mais cela dépend entièment de votre fournisseur d'accès Internet.</div><div><br /></div></div><div class="section" id="savoir" style="clear: both;"></div></div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-8405960629714153562012-05-05T15:57:01.181-07:002012-05-05T15:57:20.867-07:00History Matters: Gosport's Drydock & Planning of CSS Virginia – 150 Years Ago <div class="MsoNormal" style="margin: 0in 0in 0pt;"><em>By Marcus W. Robbins, Code 1100, Blog #14 (written August 21, 2011)</em></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;">Along the southern branch of the <place w:st="on"><placename w:st="on">Elizabeth</placename> <placename w:st="on">River</placename></place> our stone dock still remains in service today, a testament to its excellent construction that began in 1827.<span style="mso-spacerun: yes;"> </span>As I wrote in earlier blogs, <place w:st="on">Gosport</place> had one of a kind ship building and repair facilities, facilities worth fighting for.<span style="mso-spacerun: yes;"> </span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><span style="mso-spacerun: yes;"></span><place w:st="on">Gosport</place>'s industrial base was the best in the nation.<span style="mso-spacerun: yes;"> </span>Without a single shot being fired the Confederates find themselves with an instant naval establishment in summer of 1861.</div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><place w:st="on">Gosport</place>'s much under-stated value to the fledgling Southern Navy was the capacity to work on a ship in drydock.<span style="mso-spacerun: yes;"> </span>Our stone dock gained fame with the first ever dry-docking in the northern hemisphere by receiving the 74 gun Ship of the Line <state w:st="on"><place w:st="on"><em>DELAWARE</em></place></state> on June 17, 1833 but conditions are so radically different in June of 1861.<span style="mso-spacerun: yes;"> </span>A short 28 years later, the muddy burnt hulk of ex-<em>MERRIMAC</em> begins a re-birth into what eventually shall become the <em>CSS VIRGINIA</em> in this same stone dock.</div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;">The dock remains in service today looking much like the photos shown below that were taken in the early 1930's, over 75 years ago.<span style="mso-spacerun: yes;"> </span>More importantly for the South, this dock looked the same 150 years ago.<span style="mso-spacerun: yes;"> </span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;">The following information is from<i style="mso-bidi-font-style: normal;"> </i>John W. H. Porter's<i style="mso-bidi-font-style: normal;"> History of <place w:st="on"><placename w:st="on">Norfolk</placename> <placetype w:st="on">County</placetype></place> 1861-1865 </i>published in 1892. Mr. Mallory, Secretary of the Confederate States Navy, called the attention of the House Committee on Naval Affairs to the subject of iron-clads before the seat of government was removed from <city w:st="on">Montgomery</city> to <city w:st="on"><place w:st="on">Richmond</place></city>.</div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;">On the 22d of June, 1861 Naval Constructor Porter received orders to report to the Navy Department at <city w:st="on"><place w:st="on">Richmond</place></city>.<span style="mso-spacerun: yes;"> </span>The orders did not state the object for which he was to report but he took advantage of the occasion to carry his model to <city w:st="on"><place w:st="on">Richmond</place></city> for the purpose of submitting it to the Secretary.<span style="mso-spacerun: yes;"> </span>The Secretary immediately ordered a board consisting of Mr. Porter, Chief Engineer Williamson and Lieutenant Brooke to consider it.<span style="mso-spacerun: yes;"> </span>Messers. Williamson and Brooke were at that time in <place w:st="on"><city w:st="on">Richmond</city></place>.</div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><span style="font-family: "Courier New", Courier, monospace; font-size: x-small;">NAVY DEPARTMENT<br /><city w:st="on"><place w:st="on">RICHMOND</place></city> VIRGINIA., <br />June 25<sup>th</sup>, 1861</span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><span style="font-size: x-small;"><br /></span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><span style="font-family: "Courier New", Courier, monospace;">Sir – </span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><span style="font-family: "Courier New", Courier, monospace;"> In obedience to your order we have carefully examined and considered the various plans and propositions for constructing a shoot proof steam battery, and respectfully report that, in our opinion, the steam frigate Merrimac, which is in such condition from the effects of fire as to be useless for any other purpose without incurring a heavy expense in her rebuilding, can be made an efficient vessel of that character, mounting ten heavy guns; two pivot guns, and eight broadside guns of her original battery, and for further consideration we, that we cannot procure a suitable engine and boilers for any other vessel without building them, which would occupy too much time, is would appear that this is our only chance to get a suitable vessel in a short time.<span style="mso-spacerun: yes;"> </span></span><br /><span style="font-family: "Courier New", Courier, monospace;"> The bottom of the hull, boilers and heavy costly parts of the engine, being little injured, reduce the cost of construction to about one-third the amount which would be required to construct such a vessel anew.<span style="mso-spacerun: yes;"> </span>We cannot, without further examination, make an accurate estimate of the cost of the projected work, but think it will be about one hundred and ten thousand dollars, the most of which will be for labor, the materials being nearly all on hand in the yard, except the iron plating to cover the shield.<span style="mso-spacerun: yes;"> </span>The plan to be adopted in the arrangement of her shield for glancing shots, mounting guns, arranging the hull and plating, to be in accordance with the plans submitted for approval of the department.</span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /><span style="font-family: "Courier New", Courier, monospace;"><span style="mso-tab-count: 8;">[signed]</span></span><br /><span style="font-family: "Courier New", Courier, monospace;">Wm. P. Williamson, </span><span style="font-family: "Courier New", Courier, monospace;">Cheif Engineer</span><br /><span style="font-family: "Courier New", Courier, monospace;">John M. Brooke, </span><span style="font-family: "Courier New", Courier, monospace;">Lieutenant</span><br /><span style="font-family: "Courier New", Courier, monospace;">John L. Porter, </span><span style="font-family: "Courier New", Courier, monospace;">Naval Constructor</span></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;">Gosport's drydock was about to become the heart of the Confederate Navy's industrial machine and the task of transformation now rested with the Naval Constructor,<span style="mso-spacerun: yes;"> </span>Portsmouth's own, John L. Porter, because - <i style="mso-bidi-font-style: normal;"><span style="color: #990000;">"history matters"</span>.</i></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div>?? <br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><br /> <tr><td style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzIuYnAuYmxvZ3Nwb3QuY29tLy04dEUzQ3BIaVVRSS9UbDQwT3FfZFloSS9BQUFBQUFBQUFEVS9xUW1GTEE0V1Fuay9zMTYwMC9Ecnlkb2NrKzErTGVuZ3RoK0xvb2tpbmcrRWFzdCsxNC5qcGc=" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="252px" src="http://2.bp.blogspot.com/-8tE3CpHiUQI/Tl40Oq_dYhI/AAAAAAAAADU/qQmFLA4WQnk/s320/Drydock+1+Length+Looking+East+14.jpg" width="320px" xaa="true" /></a></td></tr><br /> <tr><td class="tr-caption" style="text-align: center;"><div class="MsoNormal" style="margin: 0in 0in 0pt;">Drydock 1 Length (looking east, showing ship keel blocking) circa 1930's</div><div class="MsoNormal" style="margin: 0in 0in 0pt;">Courtesy of Sargeant Memorial Room</div></td></tr><br /> </tbody></table>?? <br /><div class="separator" style="clear: both; text-align: center;"></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><br /> <tr><td style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tLy1VU3NERndtVm1MQS9UbDR4R3hOdkN5SS9BQUFBQUFBQUFEUS8zallfM1ZjSnJkVS9zMTYwMC9Ecnlkb2NrKzErSGVhZHdhbGwrMTQuanBn" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="249px" src="http://1.bp.blogspot.com/-USsDFwmVmLA/Tl4xGxNvCyI/AAAAAAAAADQ/3jY_3VcJrdU/s320/Drydock+1+Headwall+14.jpg" width="320px" xaa="true" /></a></td></tr><br /> <tr><td class="tr-caption" style="text-align: center;"><div class="MsoNormal" style="margin: 0in 0in 0pt; text-align: center;">Drydock 1 Headwall circa 1930's</div><div class="MsoNormal" style="margin: 0in 0in 0pt; text-align: center;">Courtesy of Sargeant Memorial Room<br /><br /></div></td></tr><br /> </tbody></table><br /><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div><div class="MsoNormal" style="margin: 0in 0in 0pt;"><br /></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-27664537546212566762012-05-05T15:57:01.179-07:002012-05-05T15:57:20.830-07:00History Matters: Credits for Conversion of the CSS VIRGINIA – 150 Years Ago <div class="MsoNormal" style="margin: 0in 0in 0pt;"><em>By Marcus W. Robbins, Code 1100, Blog #16 (written October 26, 2011)</em></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Without money nothing is accomplished and so was the case for the Confederate Navy. Secretary Mallory on the 18th of July, 1861, submitted a report to the Confederate Congress in which he said, "<em><span style="font-family: "Courier New", Courier, monospace;">The cost of this work is estimated by the constructor and engineer in charge at $172,523, and as time is of the first consequence in this enterprise, I have not hesitated to commence the work, and to ask Congress for the necessary appropriation</span></em>."</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Thus a shipbuilding program had begun for the South at <place w:st="on">Gosport</place> but with certain problems as John V. Quarstein points out in his book <i style="mso-bidi-font-style: normal;">C.S.S. Virginia Mistress of Hampton Roads </i>the following:</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> </span><span style="font-family: 'Georgia','serif';"></span> </div><blockquote class="tr_bq"><span style="font-family: 'Georgia','serif';"><span style="font-family: "Courier New", Courier, monospace;">"Despite shrewd success, Mallory did err with his shipbuilding program; he delegated responsibilities among several individuals. French Forrest, who did not really approve of the project, retained administrative control as yard commandant. Chief Engineer William Williamson was given the task of machinery revitalization, and Naval Constructor John L. Porter was charged with supervising the actual construction. John Mercer Brooke, a favorite of Mallory, managed the armor and armament for the ironclad as well as acting as the inspecting agent for the entire project. Friction arose immediately between Brooke and Porter since much of the project overlapped. The acrimony began with the fact that both men claimed the vessel's design as their own and continued with Brooke's modifications throughout the project. Nevertheless, the Confederacy had its first ironclad under construction by July in its finest shipyard."</span></span></blockquote><div style="text-align: justify;"></div>? <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzIuYnAuYmxvZ3Nwb3QuY29tLy10Y2VsUTd2bExMZy9Uc0VRdjJpVUJPSS9BQUFBQUFBQUFEcy9GYlRkeFRTMDRQTS9zMTYwMC9CbG9nKzE2YS5KUEc=" imageanchor="1" style="clear: right; cssfloat: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="207px" nda="true" src="http://2.bp.blogspot.com/-tcelQ7vlLLg/TsEQv2iUBOI/AAAAAAAAADs/FbTdxTS04PM/s320/Blog+16a.JPG" width="320px" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span class="101"><span style="font-family: 'Georgia','serif'; font-size: 7.5pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;">Mr. John L. Porter's Model June 1861</span></span><span style="font-family: 'Georgia','serif'; font-size: 7.5pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;"><br /><span class="101"><span style="mso-ansi-font-size: 7.5pt; mso-bidi-font-size: 7.5pt;">(page 347 History of <place w:st="on"><city w:st="on">Norfolk</city></place> County 1861-1865) </span></span><br />(Courtesy of Marcus W. Robbins)</span><span style="font-family: 'Georgia','serif'; font-size: 12pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;"> </span></td></tr></tbody></table>? <div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> The following various statements are gleaned from John W. H. Porter's <em><span style="font-family: 'Georgia','serif';">History of <place w:st="on"><placename w:st="on">Norfolk</placename> <placetype w:st="on">County</placetype></place> 1861-1865</span></em> published in 1892.</span></div><span style="font-family: 'Georgia','serif';"><blockquote class="tr_bq"><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"><span style="font-family: "Courier New", Courier, monospace;">Porter put forth a design per his model of June 1861 to extend the shield and submerged her eaves and ends two feet all around, and would have extended her shield the entire length had she not been too sharp at the bow and the stern, and therefore he stopped it where the vessel became too narrow to admit its being built any further.</span></span></div></blockquote></span><br />?? <div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Subsequent to the publication of the report of Secretary Mallory Lieutenant Brooke applied to the Confederate Patent Office and obtained a patent for "<em>an iron-clad with submerged ends, projecting beyond her shield</em>", and it was claimed for him that this is evidence that he was the author of which the <em>Virginia</em> was built into an iron-clad.</span></div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzQuYnAuYmxvZ3Nwb3QuY29tLy1HeGp1MFlOYWpkTS9Uc0VROTdSYVhrSS9BQUFBQUFBQUFEMC9nd0Iya2Zjb0VMZy9zMTYwMC9CbG9nKzE2Yi5KUEc=" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="196px" nda="true" src="http://4.bp.blogspot.com/-Gxju0YNajdM/TsEQ97RaXkI/AAAAAAAAAD0/gwB2kfcoELg/s320/Blog+16b.JPG" width="320px" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span class="101"><span style="font-family: 'Georgia','serif'; font-size: 7.5pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;">VIRGINIA (MERRIMAC)</span></span><span style="font-family: 'Georgia','serif'; font-size: 7.5pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;"><br /><span class="101"><span style="mso-ansi-font-size: 7.5pt; mso-bidi-font-size: 7.5pt;">(page 351 History of <place w:st="on"><city w:st="on">Norfolk</city></place> County 1861-1865) </span></span><br />(Courtesy of Marcus W. Robbins)</span></td></tr></tbody></table><div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none; text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> The <em>Merrimac</em> was not selected as the result of any plan, but simply because she had an engine in her which could be utilized where it was, and the Confederates lacked the facilities for building a new engine for a new boat. The burned portion as cut away and the weight of her armor, armament, and submerged the remainder so that only her shield was out of the water. It is not probable that Constructor Porter would have built a new vessel with her ends extending out under water beyond the shield. He converted the <em>Merrimac</em> into an iron-clad after that style through necessity, and not from choice.</span></div><br /><span style="font-family: 'Georgia','serif'; font-size: 12pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;"> The converting of the vessel into an iron-clad consisted in putting the shot proof shield on her. That is all of an iron-clad nature there was about her, all there was of a plan. All the rest of was the result of accident, and not design, and if anyone is entitled to the credit of submerging her ends beyond her shield, it was Commodore Paulding of the United States Navy, who ordered Gosport to be burned, in consequence of which the Merrimac was burned to the water's edge.</span><br /><br /><span style="font-family: 'Georgia','serif'; font-size: 12pt; mso-ansi-language: EN-US; mso-bidi-font-family: 'Times New Roman'; mso-bidi-language: AR-SA; mso-fareast-font-family: 'Times New Roman'; mso-fareast-language: EN-US;"><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Without any photographs of <state w:st="on"><place w:st="on"><em>VIRGINIA</em></place></state>, we are only left to the personal viewpoints of those with power and access to producing a sketch or the written word of the era. Remember also that there are very few scant surviving documents. The Porter vs. Brooke claims of the early 1860's being what they were continued on for decades as their own individual campaigns of pride seeking credit for design. It should be noted despite of all of this fuss no Confederate iron-clads were subsequently built with submerged projecting ends.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> As time went on an article published in the Century Magazine of March 1885 further opened the rift. The story by John Taylor Wood who served on <state w:st="on"><place w:st="on"><em>VIRGINIA</em></place></state> gave new life to the controversy. The Porter camp claimed not only did the article provided an inaccurate description of the ship but that it also seemed to accept Lieutenant Jones' account to the vulnerability of the vessel at the waterline and the unprotected condition concerning the rudder and propeller.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Even extending into the 1891-92 time frames, there was still newly written correspondence supporting Porter's claim for sole design of the shield for <em>Merrimac</em>. It should be noted that by the time of Porter's death in <place w:st="on"><city w:st="on">Portsmouth</city>, <state w:st="on">Virginia</state></place>, 1893, it would be fair to believe he must have thought about his place in history daily.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Getting beyond the issue of "credit" for who designed <state w:st="on"><em>VIRGINIA</em></state> or its specific configuration, one must look upon the entire canvas of materials left and understand that the written word that we have today is from individuals that participated in the unprecedented historical events at <place w:st="on">Gosport</place> in 1861 and 1862 leading up to the Battle of Hampton Roads. They have left us "their" side of the story; we can't change what they wrote and hope modern authors stay true to the known facts and keep their spin to themselves.</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="font-family: 'Georgia','serif';"> Next we shall explore the physical transformation of <state w:st="on"><place w:st="on"><em>VIRGINIA</em></place></state> in the drydock because - <span style="color: #990000;"><strong><em><span style="font-family: 'Georgia','serif';">"history matters".</span></em></strong></span></span></div><br /><div class="separator" style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none; clear: both; text-align: center;"></div></span>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-18932786830541791422012-05-05T15:57:01.177-07:002012-05-05T15:57:20.797-07:00Transformation into the CSS VIRGINIA – 150 Years Ago <div align="left" class="left" style="margin: auto 0in; text-align: left;"><strong><span style="font-weight: normal; mso-bidi-font-weight: bold;"><em>by Marcus Robbins, NNSY Historian</em> Blog #17. January 02, 2012.</span></strong><b style="mso-bidi-font-weight: normal;"></b></div><div align="left" class="justify" style="margin: auto 0in; text-align: left;">I previously shared in Blog #14 the entire written contents of a report dated June 25th, 1861, that Constructor Porter, Engineer Williamson and Lieutenant Brooke prepared for Confederate Secretary Mallory. It provided an outline pertaining to their beliefs that the Merrimac could be salvaged, loaded with sufficient armament, make use of the existing engines and out-fitted with iron plating to cover the new shield. <br /><br />With those assurances, Secretary Mallory went forth to the Confederate Congress on July 18th, 1861, and presented the estimated cost of $172,523 and asked Congress for the necessary appropriation.<br /><br />The summer of 1861 finds Gosport at the center of the Confederate Navy, the central hub of activity.<br /><br />Soon contracts are let to the various surrounding Portsmouth and Norfolk shipyards, foundries and machine shops to provide labor, tools and supplies in order to support the South's number one assignment, transforming the burnt hulk of the Merrimac into something never before seen in North America, an iron-clad vessel.<br /><br />As so happened 28 years prior when the stone drydock made history with the first dry docking in North America in 1833 with <em>DELAWARE</em>, now again in 1861 Gosport is the central focus of attention. From the burnt hulk of <em>MERRIMAC </em>will rise a phoenix: the <em>VIRGINIA </em>is soon to be born and sail into the pages of naval warfare history forever.<br /><br />The following various statements are gleaned from John W. H. Porter's <span class="italic1"><em>History of Norfolk County 1861-1865</em></span> published in 1892.<br /></div><blockquote class="tr_bq"><span style="font-family: "Courier New", Courier, monospace;">"The plans to be adopted in the arrangement of her shield for glancing shots, mounting guns, arranging the hull and plating," were not submitted simultaneously with the report, as it was necessary for Mr. Porter to return to the Gosport Navy Yard and make an accurate measurement of the vessel, so that he could calculate her displacement and prepare the plans. Engineer Williamson also went to the Navy Yard to superintend the preparation of the machinery, and Mr. Brooke remained in Richmond. Mr. Porter measured the vessel without assistance from anyone, except a laborer to hold the end of the tape line.<br /><br />He therefore raised the line one foot at the stern and cut her down on a straight line running from a height of nineteen feet forward to twenty feet aft, so that when completed, she drew twenty-one feet forward to twenty-two feet aft. This additional displacement increased her buoyancy about two hundred tons and had to be overcome by pig iron or kentlege, which was placed on her deck ends in her spirit room to bring her eaves to the proper depth below the waterline."</span></blockquote><div align="left" class="justify" style="margin: auto 0in; text-align: left;"><br />Mr. Porter completed his drawings on the 10th of July, without having to consult anyone, took them to Richmond the next morning, and submitted them to Secretary Mallory, who immediately approved them, without re-convening the board or calling in the advise or opinion of anyone, and wrote in his own hand the following order, which he handed to Mr. Porter for delivery to Commodore Forrest, commanding the </div><div align="left" class="justify" style="margin: auto 0in; text-align: left;">Gosport Navy Yard:</div><blockquote class="tr_bq"><div align="left" class="justify" style="margin: auto 0in; text-align: left;"><span style="font-family: "Courier New", Courier, monospace;">Navy Department Richmond, Va., July 11th, 1861<br />Flag Officer F. Forrest:<br /><br />Sir—You will proceed with all practical dispatch to make changes in the Merrimac, and to build, equip, and fit her in all respects, according to the designs and plans of the Constructor, and Engineer, Messrs. Porter and Williamson. As time is of the utmost importance in this matter, you will see that the work progresses without delay to completion.</span></div><div align="left" class="justify" style="margin: auto 0in; text-align: left;"><span style="font-family: "Courier New", Courier, monospace;">S. R. MALLORY, Secretary Confederate States Navy.</span></div></blockquote><div align="left" class="justify" style="margin: auto 0in; text-align: left;">Mr. Porter returned immediately to the Gosport Navy Yard, appointed Mr. James Meads Master ship carpenter, and commenced work on the vessel in the dry-dock. The burned part was cut away, and a deck built from one end to the other. Inside the shield the deck was covered with plank, on beams, but outside the shield, at both ends, it was built of solid timber, and covered over with iron one-inch thick. Figure 3 represents the shape of a cross section amidship. </div><div class="separator" style="clear: both; text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tLy1ZaUh3OTk1TG1zZy9Ud2p5WW5LN0hUSS9BQUFBQUFBQUFEOC9od2RnREg0NmNZQS9zMTYwMC9WSVJHSU5JQStHdW4rRGVjay5qcGc=" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" rea="true" src="http://1.bp.blogspot.com/-YiHw995Lmsg/TwjyYnK7HTI/AAAAAAAAAD8/hwdgDH46cYA/s320/VIRGINIA+Gun+Deck.jpg" width="320" /></a></div><div align="center" style="text-align: center;"><span class="101"><span style="font-family: "Georgia", "serif"; font-size: 7.5pt;">VIRGINIA ~ cross section amidship showing gun and berth decks</span></span><span style="font-family: "Georgia", "serif"; font-size: 7.5pt;"><br /><span class="101"><span style="mso-ansi-font-size: 7.5pt; mso-bidi-font-size: 7.5pt;">(page 335 </span></span><em><span style="font-family: "Georgia", "serif";">History of Norfolk County 1861-1865</span></em><span class="101"><span style="mso-ansi-font-size: 7.5pt; mso-bidi-font-size: 7.5pt;">)</span></span><br /><span class="101"><span style="mso-ansi-font-size: 7.5pt; mso-bidi-font-size: 7.5pt;">(Courtesy of Marcus W. Robbin</span></span>s)</span><span style="font-family: "Georgia", "serif";"></span></div><br />The ship had only two decks, gun and berth decks, and her boilers and engine remained in their original positions.<br /><br />As the work progressed, Secretary Mallory became very urgent for its speedy conclusion, and on the 19th of August, a little more than a month after it was begun, he wrote the following order:<br /><blockquote class="tr_bq"><div align="left" class="justify" style="margin: auto 0in; text-align: left;"><span style="font-family: "Courier New", Courier, monospace;">CONFEDERATE STATES NAVY DEPARTMENT, RICHMOND, August 19th, 1861. <br />Flag Officer F. Forrest, Commanding Navy Yard, Gosport:<br /><br />Sir.—The great importance of the service expected of the Merrimac, and the urgent necessity of her speedy completion, induces me to call upon you to push forward with the work with the utmost dispatch. Chief Engineer Williamson and Constructor Porter, severally in charge of the two branches of this great work, and for which they will be held personally responsible, will receive therefore every possible facility at the expense and delay of every other work on hand if necessary.<br /><br />S. R. MALLORY, Secretary Confederate States Navy.</span></div></blockquote><div align="left" class="justify" style="margin: auto 0in; text-align: left;">Thus the entire mission of Gosport centers on successful completion of the transformation of the former <em>USS MERRIMAC</em> into the <em>CSS VIRGINIA</em>. Time was marching on and specific people were to be held accountable. The North also had a contest of its own as they were constructing what was to become known as the <em>USS MONITOR</em>, the stress level must have been incredible as each side raced to put their creation into its element for the fight yet to come.<br /><br />Next we shall discuss the shield construction, touching on dimensions and discussion of materials used along with viewing pictures of some surviving <em>VIRGINIA</em> iron artifacts because - <span class="italic1"><em><span style="color: #cc0000;"><strong>"history matters"</strong><span style="color: black;">.</span> </span></em></span></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-89530396796188444492012-05-05T15:57:01.175-07:002012-05-05T15:57:20.765-07:00Add Cool Css Menu Bar For Blogger <span style="color: #333333; font-family: arial, sans-serif;"></span><br /><span style="color: #333333; font-family: arial, sans-serif;"></span><br /><span style="color: #333333; font-family: arial, sans-serif;">How to make a blog page number navigation easily</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">Actually sometime hard to find working number navigation gadget for blogger.So this post will help you to add page number navigation easily. it will helpful to your visitors to keep watching your other post.so you can increase page-views. Its just blogger widget . try it.</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">1. Log in to blogger account > Go to Design >> Page Element</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">2. Click Add Gadget and select 'HTML/Javascript'</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">3. Paste below code.</span><br /><br /><div style="text-align: left;"><span style="color: #333333; font-family: arial, sans-serif;"></span><br /><a name='more'></a><span style="color: #333333; font-family: arial, sans-serif;"><br /></span></div><div style="height: 400px; overflow: auto; width: 325px;"><table border="1" cellpadding="1" cellspacing="0" style="text-align: left; width: 300px;" text-align="center;"><tbody><tr><td><span style="color: #333333; font-family: arial, sans-serif;"><style type='text/css'></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpageArea a {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:underline;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpageNum a {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">border:1px solid #aeaeae;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">margin:0 3px;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">padding:3px 7px;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:none;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpageNum a:hover {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">background-color:#0a8be5;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">border:1px solid #000000;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpagePoint {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">-moz-background-clip:border;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">-moz-background-inline-policy:continuous;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">-moz-background-origin:padding;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">background:#aeaeae none repeat scroll 0 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">border:1px solid #aeaeae;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">color:#333333;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">margin:0 3px;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">padding:3px 7px;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:none;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpageOf {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">margin:0 3px 0 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">padding:3px 7px;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:none;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpage a {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">border:1px solid #aeaeae;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">padding:3px 7px;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:none;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpage a:hover {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:none;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">.showpageNum a:link, .showpage a:link {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">color:#333333;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">text-decoration:none;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;"></style></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><script type='text/javascript'></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var home_page_url = location.href;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var pageCount=1;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var displayPageNum=3;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var upPageWord ='Previous';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var downPageWord ='Next';</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">function showpageCount(json) {</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisUrl = home_page_url;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var htmlMap = new Array();</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisNum = 1;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var postNum=1;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var itemCount = 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var fFlag = 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var eFlag = 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var html= '';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var upPageHtml ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var downPageHtml ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">for(var i=0, post; post = json.feed.entry[i]; i++) {</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);</span><br /><span style="color: #333333; font-family: arial, sans-serif;">timestamp = encodeURIComponent(timestamp1);</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var title = post.title.$t;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(title!=''){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisUrl.indexOf(timestamp)!=-1 ){</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> thisNum = postNum;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(title!='') postNum++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">itemCount++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">for(var p =0;p< htmlMap.length;p++){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(fFlag ==0 && p == thisNum-2){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisNum==2){</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> upPageHtml = '<span class="showpage"><a href="http://c-lien.blogspot.com/?Lw==">'+ upPageWord +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> upPageHtml = '<span class="showpage"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ upPageWord +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">fFlag++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(p==(thisNum-1)){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html += '<span class="showpagePoint">'+thisNum+'</span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(p==0){</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> html += '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?Lw==">1</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> html += '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ (p+1) +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(eFlag ==0 && p == thisNum){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">downPageHtml = '<span class="showpage"> <a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ downPageWord +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">eFlag++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisNum>1){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html = ''+upPageHtml+' '+html +' ';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisNum<(postNum-1)){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html += downPageHtml;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(postNum==1) postNum++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html += '</div>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var pageArea = document.getElementsByName("pageArea");</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var blogPager = document.getElementById("blog-pager");</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(postNum <= 2){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">for(var p =0;p< pageArea.length;p++){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">pageArea[p].innerHTML = html;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(pageArea&&pageArea.length>0){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(blogPager){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">blogPager.innerHTML = html;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">function showpageCount2(json) {</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisUrl = home_page_url;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var htmlMap = new Array();</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var isLablePage = thisUrl.indexOf("/search/label/")!=-1;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";</span><br /><span style="color: #333333; font-family: arial, sans-serif;">thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisNum = 1;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var postNum=1;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var itemCount = 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var fFlag = 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var eFlag = 0;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var html= '';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var upPageHtml ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var downPageHtml ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var labelHtml = '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?L3NlYXJjaC9sYWJlbC8nK3RoaXNMYWJsZSsnPyZhbXA7YW1wO21heC1yZXN1bHRzPScrcGFnZUNvdW50Kyc=">';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisUrl = home_page_url;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">for(var i=0, post; post = json.feed.entry[i]; i++) {</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);</span><br /><span style="color: #333333; font-family: arial, sans-serif;">timestamp = encodeURIComponent(timestamp1);</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var title = post.title.$t;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(title!=''){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisUrl.indexOf(timestamp)!=-1 ){</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> thisNum = postNum;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(title!='') postNum++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">itemCount++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">for(var p =0;p< htmlMap.length;p++){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(fFlag ==0 && p == thisNum-2){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisNum==2){</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> upPageHtml = labelHtml + upPageWord +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> upPageHtml = '<span class="showpage"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ upPageWord +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">fFlag++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(p==(thisNum-1)){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html += '<span class="showpagePoint">'+thisNum+'</span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(p==0){</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> html = labelHtml+'1</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;"> html += '<span class="showpageNum"><a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ (p+1) +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(eFlag ==0 && p == thisNum){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">downPageHtml = '<span class="showpage"> <a href="http://c-lien.blogspot.com/?JytodG1sTWFwW3BdKyc=">'+ downPageWord +'</a></span>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">eFlag++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisNum>1){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(!isLablePage){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html = ''+upPageHtml+' '+html +' ';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html = ''+upPageHtml+' '+html +' ';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(thisNum<(postNum-1)){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html += downPageHtml;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(postNum==1) postNum++;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html += '</div>';</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var pageArea = document.getElementsByName("pageArea");</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var blogPager = document.getElementById("blog-pager");</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(postNum <= 2){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">for(var p =0;p< pageArea.length;p++){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">pageArea[p].innerHTML = html;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(pageArea&&pageArea.length>0){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">html ='';</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">if(blogPager){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">blogPager.innerHTML = html;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;"></script></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><script type='text/javascript'></span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var thisUrl = home_page_url;</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if (thisUrl.indexOf("/search/label/")!=-1){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if (thisUrl.indexOf("?updated-max")!=-1){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{</span><br /><span style="color: #333333; font-family: arial, sans-serif;">var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"><br /></span><br /><span style="color: #333333; font-family: arial, sans-serif;">var home_page = "/";</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if (thisUrl.indexOf("?q=")==-1){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">if (thisUrl.indexOf("/search/label/")==-1){</span><br /><span style="color: #333333; font-family: arial, sans-serif;">document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;">}</span><br /><span style="color: #333333; font-family: arial, sans-serif;"></script></span></td></tr></tbody></table></div><span style="color: #333333; font-family: arial, sans-serif;"></span><br /><span style="color: #333333; font-family: arial, sans-serif;"></span><br /><div style="text-align: left;"><span style="color: #333333; font-family: arial, sans-serif;"><br /></span></div><div style="text-align: left;"><span style="color: #333333; font-family: arial, sans-serif;">4. Save HTML/Javascript. you are done.</span></div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-36832351929669635432012-05-05T15:57:01.173-07:002012-05-05T15:57:20.727-07:00Carregar Css E Aplicar Num Campo De Texto as3 <pre class="prettyprint" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(198, 211, 222); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(198, 211, 222); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(198, 211, 222); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(198, 211, 222); border-top-style: solid; border-top-width: 1px; color: #1c5562; font-size: 11px; line-height: 15px; margin-left: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;"><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> loader</span><span class="pun" style="color: #666600;">:</span><span class="typ" style="color: #660066;">URLLoader</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">new</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">URLLoader</span><span class="pun" style="color: #666600;">();</span><span class="pln" style="color: black;"><br /></span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> sheet</span><span class="pun" style="color: #666600;">:</span><span class="typ" style="color: #660066;">StyleSheet</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">new</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">StyleSheet</span><span class="pun" style="color: #666600;">();</span><span class="pln" style="color: black;"><br /><br />loader</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">load</span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">new</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">URLRequest</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">"style.css"</span><span class="pun" style="color: #666600;">));</span><span class="pln" style="color: black;"><br />loader</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">addEventListener</span><span class="pun" style="color: #666600;">(</span><span class="typ" style="color: #660066;">Event</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">COMPLETE</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> onCssLoaded</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"><br /></span><span class="kwd" style="color: #000088;">function</span><span class="pln" style="color: black;"> onCssLoaded</span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">event</span><span class="pun" style="color: #666600;">:</span><span class="typ" style="color: #660066;">Event</span><span class="pun" style="color: #666600;">):</span><span class="kwd" style="color: #000088;">void</span><span class="pln" style="color: black;"><br /></span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"><br /> sheet</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">parseCSS</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">loader</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">data</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"><br /> textBox</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">styleSheet </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> sheet</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"><br /> textBox</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">htmlText </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"seu texto em formato html"</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;"><br /></span><span class="pun" style="color: #666600;">}</span></pre><br class="Apple-interchange-newline" /><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-40612342108205445592012-05-05T15:57:01.171-07:002012-05-05T16:05:27.983-07:00Logo CSS<div dir="ltr" style="text-align: left;" trbidi="on">
Logo Androida jest tak popularne i zarazem tak proste, ?e Johan van Tongeren postanowi? je narysowa? w CSSie. Projet jest innowatorski i wbrew pozorom mo?e by? przydatny. Zast?pienie kolejnych grafik na stronie, prostym kodem CSS, zmniejsza wag? strony. Niweluje te? problemy, które wyst?puj? czasem przy jej przenoszeniu. Za to sam obrazek wygenerowany z CSSa jest pozbawiony zniekszta?ce? wynikaj?cych z kompresji grafiki.<br />
<br />
<div class="blogger-post-footer">
</div>
</div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-54147116885737875732012-05-05T15:57:01.169-07:002012-05-05T15:57:20.663-07:00Cara mempercepat loading blog dengan kompress CSS Blog <div class="separator" style="clear: both; text-align: center;"></div><br /><div class="separator" style="clear: both; text-align: center;"></div>mempercepat loading blog dengan kompress CSS Blog. Loading blog memang sangat mempengaruhi trafik blog kita. Loading blog yang terlalu berat dan lama akan mengakibatkan blog kita menjadi tidak optimal untuk di buka dan di jelajahi visitor. Selain mengedit template blog agar seo Friendly, Loading blog sangatlah diperlukan untuk menunjang perkembangan blog kita. Untuk tips mempercepat blog kali ini, saya akan membagikan sebuah tips mengkompress blog CSS.<br /><br /><br /><br />CSS ini sendiri kependekan dari Cascading Style Sheet yaitu sebuah bahasa pemograman yang digunakan untuk mendesain tampilan tata letak halaman blog kita. Jadi yang kita perlukan hanyalah mengkompres file CSS blog kita. Dengan demikian blog kita akan semakin ringan dan mudah loading. <br />Cara mudah mempercepat loading blog - Cara mengkompress CSS blog adalah sebagai berikut. Sedikit tips dulu, agar tidak terjadi kesalahan yang tidak di inginkan maka lebih baik backup dulu data anda dengan klik download full template.<br /><br />- login dulu ke akun blog anda<br />- lalu pilih rancangan --> pilih Edit HTML<br />- setelah itu anda cari kode CSS nya. Biasanya terletak antara kode <b:skin><![CDATA[/* kode CSSnya di sini sampai ]]></b:skin><br />- lalu Cut dan copykan<br />- Setelah itu buka situs <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy5jc3Nkcml2ZS5jb20vaW5kZXgucGhwL21haW4vY3NzY29tcHJlc3Nvci8=" target="_blank">CSS DRIVE</a> dan pastekan kode nya di sana..<br /> <br /> <br /><br />- kemudian di Compression mode pilih Normal<br />- di bagian Comments handling pilih Don't Strip any comments<br />- lalu klik compress it<br /><br /><br /><br />- Setelah kode CSS kita terkompress, maka copy pastekan semua kodenya dan letakkan di antara <b:skin><![CDATA[/* sampai ]]></b:skin><br />- Jika semua sudah selesai jangan lupa Save Template.<br /><br />Sekian tips Cara mengkompress Blog CSS sebagai Cara Mempercepat loading Blog.<br /><span id="fullpost"> </span><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-30127614423866367142012-05-05T15:57:01.167-07:002012-05-05T15:57:20.632-07:00CSS - Ass-backwards. I haven't had a day quite like this in awhile. I had a weird sleep because for some reason, I was still thinking about today's tasks/exams etc. in my state of unconsciousness. Strange. I don't think that's happened to me since like... junior year in high school when I had crazy ochem and English things to be worrying about. From about 8am to 12:30pm was a hectic mess of running around and stressing out. I skipped class to eat and finish homework like a normal human being. Things got <i>so</i> much better from there on, so for that I'm ridiculously thankful.<br /><br />Sometimes I wonder how much I'm lied to/how much I'm told a half-truth. That's a bit of an odd thing to say, I know, but sometimes people just make me wonder. Obviously I don't have to worry about close friends or anything, just... not sure how to elaborate on this subject, really. Events occur that just make me skeptical. People are so unpredictable and hard to understand sometimes. I feel like I'm also constantly aware of people that are too wrapped up in themselves to be even slightly concerned about me. Ego, ego, ego. Honestly, no one should be too busy to pay a little bit of attention to another human being. Wwwwoooo this is getting too whiny/negative, this is quite enough. I feel like others probably feel the same way though... at least sometimes :) Blog rant, whatever. Cla$$.<br /><br />-CSS<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-85081885036020057022012-05-05T15:57:01.165-07:002012-05-05T15:57:20.601-07:00CSS - Meowing. This week is all over the place. For the past few days, my mornings have been complete shitstorms... and then the day gets progressively better until everything is in order. I don't like being a ridiculous sass-grouch. Don't know what that's all about, but wutevaarrr. Not that this is even blogworthy but: I got two more Babylips chapstick things. I'm obsessed, okay?! I want the weather to be pretttyyy againnnn. It's Thursday tomorrow... woo? Well usually it would be "woo?" but I guess for tomorrow it should be, "WOO!" We'll see. Hey, at least I'm done stressing out about exams/papers for the time being. That's for hearings next week, yay! Here's to life, liberty, water, muffins, bagels, my face, toes, tea, and friends.<br /><br />-CSS<br /><br />Edit: "I am a master of brushes." NMF and I are matchy-matchy :)<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-31062930401640036422012-05-05T15:57:01.163-07:002012-05-05T15:57:20.544-07:00CSS - snorlaxing. This weekend was rather lovely. My parents were here, so I got to spend a lot of time with them. Last night with JJV was kinda nuts... in the best ways. Wandering, new bus friends, Romeo & Juliet balcony bonding, dancing, lounging, pizza, sleep. Yes to all of the above. I'm going to keep this short and vague because I'm in the library - being super productive, clearly. Why do I have to do wwwooorrrk? Kittens reunite soonish, wurrhurrrr. ALSO HAPPY EASTER.<br /><br /><3<br />CSS<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-5973269468584442152012-05-05T15:57:01.161-07:002012-05-05T15:57:20.517-07:00CSS - Is it okay if I don't smile back? I just don't feel like it sometimes, and quite frankly, you don't deserve it. WTF IS THIS WEATHER? Mmmm sandwich.<br /><br />-CSS<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-15947265314843943352012-05-05T15:57:01.159-07:002012-05-05T15:57:20.483-07:00Três ferramentas para edição online de CSS Se você é daqueles que precisa de tempo ou não é muito bom com o CSS, as ferramentas abaixo vão lhe ajudar a gerar o mesmo. São ferramentas para edição online de CSS e HTML, confira!<br /><br /><h2> Spritebox</h2>Spritebox é uma ferramenta WYSIWYG para ajudar Web Designers de forma fácil e rápida. Ela é baseada no princípio de usar a propriedade <b>background-position</b> para alinhar as áreas de uma imagem em elementos de uma página. Ela foi feita usando uma combinação entre JQuery, CSS3 e HTML5 e é totalmente livre para o uso.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzQuYnAuYmxvZ3Nwb3QuY29tLy1BajJJVUFFaWZYUS9Ud3p5cm9lTnUtSS9BQUFBQUFBQUE2QS82V1BRZzFrZnFWVS9zMTYwMC8xMTMuanBn" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-Aj2IUAEifXQ/TwzyroeNu-I/AAAAAAAAA6A/6WPQg1kfqVU/s1600/113.jpg" /></a></div><br /><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy5zcHJpdGVib3gubmV0Lw==" target="_bçank">www.spritebox.net</a></span></div><h2> CSS layout Generator</h2>Este gerador ajuda a criar a estrutura do seu de site, usando HTML e CSS. Valores podem ser especificados em pixels ou porcentagens.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzIuYnAuYmxvZ3Nwb3QuY29tLy11ZkctUGRfeU1iby9Ud3oxZzgzZTl5SS9BQUFBQUFBQUE2Zy90bmp6MC01NXFFQS9zMTYwMC9VbnRpdGxlZC0xLnBuZw==" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ufG-Pd_yMbo/Twz1g83e9yI/AAAAAAAAA6g/tnjz0-55qEA/s1600/Untitled-1.png" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2Nzc2xheW91dGdlbmVyYXRvci5jb20v" target="_bçank"><span style="font-size: large;">www.csslayoutgenerator.com</span></a></div><h2> Ultimate CSS Gradient Generator</h2>Um poderoso editor de gradiente da ColorZilla<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tLy1waFFwRXRFaDlMQS9Ud3p5LXNDUXRVSS9BQUFBQUFBQUE2WS9CaFFXckJSeE4xRS9zMTYwMC84MS5qcGc=" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-phQpEtEh9LA/Twzy-sCQtUI/AAAAAAAAA6Y/BhQWrBRxN1E/s1600/81.jpg" /></a></div><br /><div style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy5jb2xvcnppbGxhLmNvbS9ncmFkaWVudC1lZGl0b3Iv" target="_bçank"><span style="font-size: large;">www.colorzilla.com/gradient-editor</span></a></div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-54215239603214869572012-05-05T15:57:01.157-07:002012-05-05T15:57:20.447-07:00Ilusões de ótica feitas com puro CSS Hoje teremos algo muito interessante. Demonstrações de várias ilusões de ótica feitas com CSS3 (sem usar qualquer imagens ou javascript) criadas pelo site <a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy5zY3JpcHQtdHV0b3JpYWxzLmNvbS9jc3MzLW9wdGljYWwtaWxsdXNpb25zLw==" target="_blank">Script-Tutorials</a>.<br /><br /><div style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9JbHVzb2VzQ1NTMy5odG1s" target="_blank"><span style="font-size: large;">Clique aqui e veja as demonstrações</span></a></div><h2>CSS</h2>Existem dois arquivos CSS: <b>layout.css</b> e<b> illusions.css</b>. O primeiro arquivo (layout.css) contêm os estilos da página que não será publicado aqui.<br /><br /><h2>CSS das ilusões</h2><blockquote class="tr_bq">span {<br /> display: none;<br />}<br />.contr {<br /> color: #000000;<br /> cursor: pointer;<br /> float: left;<br /> font-size: 16px;<br /> font-weight: bold;<br /> height: 30px;<br /> line-height: 30px;<br /> margin: 10px;<br /> text-align: center;<br /> text-decoration: none;<br /> width: 60px;<br /> -webkit-border-radius:10px;<br /> -moz-border-radius:10px;<br /> -ms-border-radius:10px;<br /> -o-border-radius:10px;<br /> border-radius:10px;<br /> background-color:#e3e3ff;<br /> background: -moz-linear-gradient(#ffffff, #eee);<br /> background: -ms-linear-gradient(#ffffff, #eee);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eee));<br /> background: -webkit-linear-gradient(#ffffff, #eee);<br /> background: -o-linear-gradient(#ffffff, #eee);<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee');<br /> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee')";<br /> background: linear-gradient(#ffffff, #eee);<br />}<br />.contr:hover{<br /> background-color:#e3e3ff;<br /> box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);<br /> -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);<br /> -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);<br />}<br />.demos {<br /> background-color: #b2b2b2;<br /> display: block;<br /> height: 640px;<br /> margin-top: 55px;<br /> overflow: hidden;<br /> position: relative;<br />}<br />.demos > div {<br /> display: none;<br />}<br />#page1:target ~ .demos #i1 {<br /> display: block;<br />}<br />#page2:target ~ .demos #i2 {<br /> display: block;<br />}<br />#page3:target ~ .demos #i3 {<br /> display: block;<br />}<br />#page4:target ~ .demos #i4 {<br /> display: block;<br />}<br />#page5:target ~ .demos #i5 {<br /> display: block;<br />}<br />#page6:target ~ .demos #i6 {<br /> display: block;<br />}<br />/* illusion 1 */<br />#i1 {<br /> width: 900px;<br />}<br />#i1 .row {<br /> background-color: #fff;<br /> border-bottom: 2px solid #888;<br /> height: 90px;<br /> -webkit-background-size: 140px 70px;<br /> -moz-background-size: 140px 70px;<br /> -ms-background-size: 140px 70px;<br /> -o-background-size: 140px 70px;<br /> background-size: 140px 70px;<br /> background-position: 0 50%;<br /> background-image: -webkit-linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br /> background-image: -moz-linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br /> background-image: -ms-linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br /> background-image: -o-linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br /> background-image: linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br />}<br />#i1 .row:nth-child(3n+3) {<br /> background-position: 60px 50%;<br />}<br />#i1 .row:nth-child(2n+2) {<br /> background-position: 30px 50%;<br />}<br />/* illusion 2 */<br />#i2 {<br /> background-color: #98CB00;<br /> height: 640px;<br /> margin: 0 auto;<br /> overflow: hidden;<br /> padding: 0 150px;<br /> position: relative;<br /> width: 600px;<br />}<br />#i2 > div {<br /> float: left;<br /> height: 105px;<br /> padding-left: 90px;<br /> padding-top: 90px;<br /> position: relative;<br /> width: 105px;<br />}<br />#i2 div div {<br /> border: 1px outset #fff;<br /> height: 20px;<br /> position: absolute;<br /> width: 30px;<br /> -webkit-border-radius: 100px / 50px;<br /> -moz-border-radius: 100px / 50px;<br /> -ms-border-radius: 100px / 50px;<br /> -o-border-radius: 100px / 50px;<br /> border-radius: 100px / 50px;<br /> background: -webkit-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);<br /> background: -moz-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);<br /> background: -ms-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);<br /> background: -o-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);<br /> background: linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402);<br />}<br />#i2 #o1 {<br /> -webkit-transform: rotate(-30deg) translatex(70px);<br /> -moz-transform: rotate(-30deg) translatex(70px);<br /> -ms-transform: rotate(-30deg) translatex(70px);<br /> -o-transform: rotate(-30deg) translatex(70px);<br /> transform: rotate(-30deg) translatex(70px);<br />}<br />#i2 #o2 {<br /> -webkit-transform: rotate(-60deg) translatex(70px);<br /> -moz-transform: rotate(-60deg) translatex(70px);<br /> -ms-transform: rotate(-60deg) translatex(70px);<br /> -o-transform: rotate(-60deg) translatex(70px);<br /> transform: rotate(-60deg) translatex(70px);<br />}<br />#i2 #o3 {<br /> -webkit-transform: rotate(-90deg) translatex(70px);<br /> -moz-transform: rotate(-90deg) translatex(70px);<br /> -ms-transform: rotate(-90deg) translatex(70px);<br /> -o-transform: rotate(-90deg) translatex(70px);<br /> transform: rotate(-90deg) translatex(70px);<br />}<br />#i2 #o4 {<br /> -webkit-transform: rotate(-120deg) translatex(70px);<br /> -moz-transform: rotate(-120deg) translatex(70px);<br /> -ms-transform: rotate(-120deg) translatex(70px);<br /> -o-transform: rotate(-120deg) translatex(70px);<br /> transform: rotate(-120deg) translatex(70px);<br />}<br />#i2 #o5 {<br /> -webkit-transform: rotate(-150deg) translatex(70px);<br /> -moz-transform: rotate(-150deg) translatex(70px);<br /> -ms-transform: rotate(-150deg) translatex(70px);<br /> -o-transform: rotate(-150deg) translatex(70px);<br /> transform: rotate(-150deg) translatex(70px);<br />}<br />#i2 #o6 {<br /> -webkit-transform: rotate(-180deg) translatex(70px);<br /> -moz-transform: rotate(-180deg) translatex(70px);<br /> -ms-transform: rotate(-180deg) translatex(70px);<br /> -o-transform: rotate(-180deg) translatex(70px);<br /> transform: rotate(-180deg) translatex(70px);<br />}<br />#i2 #o7 {<br /> -webkit-transform: rotate(-210deg) translatex(70px);<br /> -moz-transform: rotate(-210deg) translatex(70px);<br /> -ms-transform: rotate(-210deg) translatex(70px);<br /> -o-transform: rotate(-210deg) translatex(70px);<br /> transform: rotate(-210deg) translatex(70px);<br />}<br />#i2 #o8 {<br /> -webkit-transform: rotate(-240deg) translatex(70px);<br /> -moz-transform: rotate(-240deg) translatex(70px);<br /> -ms-transform: rotate(-240deg) translatex(70px);<br /> -o-transform: rotate(-240deg) translatex(70px);<br /> transform: rotate(-240deg) translatex(70px);<br />}<br />#i2 #o9 {<br /> -webkit-transform: rotate(-270deg) translatex(70px);<br /> -moz-transform: rotate(-270deg) translatex(70px);<br /> -ms-transform: rotate(-270deg) translatex(70px);<br /> -o-transform: rotate(-270deg) translatex(70px);<br /> transform: rotate(-270deg) translatex(70px);<br />}<br />#i2 #o10 {<br /> -webkit-transform: rotate(-300deg) translatex(70px);<br /> -moz-transform: rotate(-300deg) translatex(70px);<br /> -ms-transform: rotate(-300deg) translatex(70px);<br /> -o-transform: rotate(-300deg) translatex(70px);<br /> transform: rotate(-300deg) translatex(70px);<br />}<br />#i2 #o11 {<br /> -webkit-transform: rotate(-330deg) translatex(70px);<br /> -moz-transform: rotate(-330deg) translatex(70px);<br /> -ms-transform: rotate(-330deg) translatex(70px);<br /> -o-transform: rotate(-330deg) translatex(70px);<br /> transform: rotate(-330deg) translatex(70px);<br />}<br />#i2 #o12 {<br /> -webkit-transform: rotate(0deg) translatex(70px);<br /> -moz-transform: rotate(0deg) translatex(70px);<br /> -ms-transform: rotate(0deg) translatex(70px);<br /> -o-transform: rotate(0deg) translatex(70px);<br /> transform: rotate(0deg) translatex(70px);<br />}<br />/* illusion 3 */<br />#i3 {<br /> color: #000000;<br /> font-family: Times New Roman;<br /> font-size: 250px;<br /> padding-left: 300px;<br />}<br />#i3 .rev {<br /> text-align: right;<br /> -webkit-transform: rotate(-180deg);<br /> -moz-transform: rotate(-180deg);<br /> -ms-transform: rotate(-180deg);<br /> -o-transform: rotate(-180deg);<br /> transform: rotate(-180deg);<br />}<br />/* illusion 4 */<br />#i4 .row {<br /> background-color: #fff;<br /> border-bottom: 5px solid #fff;<br /> height: 50px;<br /> -webkit-background-size: 60px 50px;<br /> -moz-background-size: 60px 50px;<br /> -ms-background-size: 60px 50px;<br /> -o-background-size: 60px 50px;<br /> background-size: 60px 50px;<br /> background-position: 0 50%;<br /> background-image: -webkit-linear-gradient(0deg, #000 90%, transparent 10%, transparent);<br /> background-image: -moz-linear-gradient(0deg, #000 90%, transparent 10%, transparent);<br /> background-image: -ms-linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br /> background-image: -o-linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br /> background-image: linear-gradient(0deg, #000 50%, transparent 50%, transparent);<br />}<br />/* illusion 5 */<br />@-webkit-keyframes custom_effect {<br /> 0% {opacity: 0;}<br /> 33% {opacity: 1;}<br /> 100% {opacity: 1;}<br />}<br />@-moz-keyframes custom_effect {<br /> 0% {opacity: 0;}<br /> 33% {opacity: 1;}<br /> 100% {opacity: 1;}<br />}<br />#i5 {<br /> background-color: #b2b2b2;<br /> height: 600px;<br /> margin: 0 auto;<br /> overflow: hidden;<br /> position: relative;<br /> width: 600px;<br />}<br />#i5 > div {<br /> float: left;<br /> height: 200px;<br /> padding-left: 200px;<br /> padding-top: 200px;<br /> position: relative;<br /> width: 200px;<br />}<br />#i5 div div {<br /> height: 50px;<br /> position: absolute;<br /> width: 50px;<br /> -webkit-border-radius: 50px;<br /> -moz-border-radius: 50px;<br /> -ms-border-radius: 50px;<br /> -o-border-radius: 50px;<br /> border-radius: 50px;<br /> background-color: #b2b2b2;<br /> background-image: -webkit-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);<br /> background-image: -moz-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);<br /> background-image: -o-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);<br /> background-image: radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%);<br /> -moz-animation-name: custom_effect;<br /> -moz-animation-duration: 1.2s;<br /> -moz-animation-timing-function: linear;<br /> -moz-animation-iteration-count: infinite;<br /> -moz-animation-direction: normal;<br /> -moz-animation-delay: 0;<br /> -moz-animation-play-state: running;<br /> -moz-animation-fill-mode: forwards;<br /> -webkit-animation-name: custom_effect;<br /> -webkit-animation-duration: 1.2s;<br /> -webkit-animation-timing-function: linear;<br /> -webkit-animation-iteration-count: infinite;<br /> -webkit-animation-direction: normal;<br /> -webkit-animation-delay: 0;<br /> -webkit-animation-play-state: running;<br /> -webkit-animation-fill-mode: forwards;<br />}<br />#i5 #o1 {<br /> -moz-transform: rotate(30deg) translatex(150px);<br /> -moz-animation-delay: 0.1s;<br /> -webkit-transform: rotate(30deg) translatex(150px);<br /> -webkit-animation-delay: 0.1s;<br />}<br />#i5 #o2 {<br /> -moz-transform: rotate(60deg) translatex(150px);<br /> -moz-animation-delay: 0.2s;<br /> -webkit-transform: rotate(60deg) translatex(150px);<br /> -webkit-animation-delay: 0.2s;<br />}<br />#i5 #o3 {<br /> -moz-transform: rotate(90deg) translatex(150px);<br /> -moz-animation-delay: 0.3s;<br /> -webkit-transform: rotate(90deg) translatex(150px);<br /> -webkit-animation-delay: 0.3s;<br />}<br />#i5 #o4 {<br /> -moz-transform: rotate(120deg) translatex(150px);<br /> -moz-animation-delay: 0.4s;<br /> -webkit-transform: rotate(120deg) translatex(150px);<br /> -webkit-animation-delay: 0.4s;<br />}<br />#i5 #o5 {<br /> -moz-transform: rotate(150deg) translatex(150px);<br /> -moz-animation-delay: 0.5s;<br /> -webkit-transform: rotate(150deg) translatex(150px);<br /> -webkit-animation-delay: 0.5s;<br />}<br />#i5 #o6 {<br /> -moz-transform: rotate(180deg) translatex(150px);<br /> -moz-animation-delay: 0.6s;<br /> -webkit-transform: rotate(180deg) translatex(150px);<br /> -webkit-animation-delay: 0.6s;<br />}<br />#i5 #o7 {<br /> -moz-transform: rotate(210deg) translatex(150px);<br /> -moz-animation-delay: 0.7s;<br /> -webkit-transform: rotate(210deg) translatex(150px);<br /> -webkit-animation-delay: 0.7s;<br />}<br />#i5 #o8 {<br /> -moz-transform: rotate(240deg) translatex(150px);<br /> -moz-animation-delay: 0.8s;<br /> -webkit-transform: rotate(240deg) translatex(150px);<br /> -webkit-animation-delay: 0.8s;<br />}<br />#i5 #o9 {<br /> -moz-transform: rotate(270deg) translatex(150px);<br /> -moz-animation-delay: 0.9s;<br /> -webkit-transform: rotate(270deg) translatex(150px);<br /> -webkit-animation-delay: 0.9s;<br />}<br />#i5 #o10 {<br /> -moz-transform: rotate(300deg) translatex(150px);<br /> -moz-animation-delay: 1.0s;<br /> -webkit-transform: rotate(300deg) translatex(150px);<br /> -webkit-animation-delay: 1.0s;<br />}<br />#i5 #o11 {<br /> -moz-transform: rotate(330deg) translatex(150px);<br /> -moz-animation-delay: 1.1s;<br /> -webkit-transform: rotate(330deg) translatex(150px);<br /> -webkit-animation-delay: 1.1s;<br />}<br />#i5 #o12 {<br /> -moz-transform: rotate(0deg) translatex(150px);<br /> -moz-animation-delay: 1.2s;<br /> -webkit-transform: rotate(0deg) translatex(150px);<br /> -webkit-animation-delay: 1.2s;<br />}<br />/* illusion 5 */<br />#i6 {<br /> background-color: #3f023e;<br /> height: 640px;<br /> margin: 0 auto;<br /> overflow: hidden;<br /> padding-left: 120px;<br /> position: relative;<br /> width: 900px;<br />}<br />#i6 .yellow {<br /> background-color: #b9bd04;<br /> background-image: -webkit-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);<br /> background-image: -moz-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);<br /> background-image: -o-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);<br /> background-image: radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%);<br />}<br />#i6 .pink {<br /> background-color: #f101e8;<br /> background-image: -webkit-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);<br /> background-image: -moz-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);<br /> background-image: -o-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);<br /> background-image: radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%);<br />}<br />#i6 > div {<br /> float: left;<br /> height: 320px;<br /> position: relative;<br /> width: 320px;<br />}<br />#i6 .r1 {<br /> height: 320px;<br /> position: absolute;<br /> width: 320px;<br /> -webkit-border-radius: 320px;<br /> -moz-border-radius: 320px;<br /> -ms-border-radius: 320px;<br /> -o-border-radius: 320px;<br /> border-radius: 320px;<br />}<br />#i6 .r2 {<br /> height: 240px;<br /> left: 40px;<br /> position: absolute;<br /> top: 40px;<br /> width: 240px;<br /> -webkit-border-radius: 240px;<br /> -moz-border-radius: 240px;<br /> -ms-border-radius: 240px;<br /> -o-border-radius: 240px;<br /> border-radius: 240px;<br />}<br />#i6 .r3 {<br /> height: 160px;<br /> left: 40px;<br /> position: absolute;<br /> top: 40px;<br /> width: 160px;<br /> -webkit-border-radius: 160px;<br /> -moz-border-radius: 160px;<br /> -ms-border-radius: 160px;<br /> -o-border-radius: 160px;<br /> border-radius: 160px;<br />}<br />#i6 .r4 {<br /> height: 80px;<br /> left: 40px;<br /> position: absolute;<br /> top: 40px;<br /> width: 80px;<br /> -webkit-border-radius: 80px;<br /> -moz-border-radius: 80px;<br /> -ms-border-radius: 80px;<br /> -o-border-radius: 80px;<br /> border-radius: 80px;<br />}</blockquote><br /><pre></pre>O CSS é muito grande mas é só isso.<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-67211613714001962192012-05-05T15:57:01.155-07:002012-05-05T15:57:20.422-07:00Ícone do Google+ feito com puro CSS Bom, galera, hoje vamos ver como se cria o ícone do Google+ com puro CSS. Eu criei esse ícone e quero compartilhar com vocês, até agora não vi nenhum site ensinando a fazer o mesmo, então, me considero o primeiro a criar o ícone do Google+ com CSS puro. Ok, agora sem blá blá blá...<br /><br /><h2> HTML</h2><blockquote class="tr_bq"><div id="google-plus-t100" class="t100 fl"><br /><span>g</span><span class="google-plus-mais-t100">+</span><br /></div><br /><div id="google-plus-t64" class="t64 fl"><br /><span>g</span><span class="google-plus-mais-t64">+</span><br /></div><br /><div id="google-plus-t32" class="t32 fl"><br /><span>g</span><span class="google-plus-mais-t32">+</span><br /></div></blockquote><h2> CSS 32px</h2>O <b>t100</b>, <b>t64</b> e <b>t32</b> significa e é o tamanho dos ícones.<br /><blockquote>#google-plus-t32 {<br /> font-family:Georgia, "Times New Roman", Times, serif;<br /> background: #d04329;<br /> color: #fff;<br /> text-align: center;<br /> border: 0px solid #072266;<br /> font-weight: normal;<br /> font-size: 25px;<br /> line-height: 24px;<br /> position: relative;<br /> box-shadow: 0 0 4px rgba(0,0,0,0.4);<br /> -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);<br /> -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);<br />}<br />.google-plus-mais-t32 {<br />font-size:15px;<br />}<br />.t32 {<br /> width: 32px;<br /> height: 32px;<br /> border-width: 1px;<br /> line-height: 64px;<br /> text-shadow: 0 -1px 0 rgba(0,0,0,0.5);<br /> border-radius: 3px;<br /> -moz-border-radius: 5px;<br />}<br /><span style="background-color: transparent;">.fl {</span><br /> float: left;<br /> margin-right: 20px;<br />}</blockquote><h2> CSS 64px</h2><blockquote class="tr_bq">#google-plus-t64 {<br /> font-family:Georgia, "Times New Roman", Times, serif;<br /> background: #d04329;<br /> color: #fff;<br /> text-align: center;<br /> border: 0px solid #072266;<br /> font-weight: normal;<br /> font-size: 60px;<br /> line-height: 45px;<br /> position: relative;<br /> box-shadow: 0 0 4px rgba(0,0,0,0.4);<br /> -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);<br /> -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);<br />}<br />.google-plus-mais-t64 {<br />font-size:30px;<br />}<br />.t64 {<br /> width: 64px;<br /> height: 64px;<br /> border-width: 1px;<br /> line-height: 64px;<br /> text-shadow: 0 -1px 0 rgba(0,0,0,0.5);<br /> border-radius: 5px;<br /> -moz-border-radius: 5px;<br />}<br />.fl {<br /> float: left;<br /> margin-right: 20px;<br />}</blockquote><div><br /></div><div><h2> CSS 100px</h2></div><div><blockquote class="tr_bq">#google-plus-t100 {<br /> font-family:Georgia, "Times New Roman", Times, serif;<br /> background: #d04329;<br /> color: #fff;<br /> text-align: center;<br /> border: 0px solid #072266;<br /> font-weight: normal;<br /> font-size: 100px;<br /> line-height: 60px;<br /> position: relative;<br /> box-shadow: 0 0 4px rgba(0,0,0,0.4);<br /> -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);<br /> -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);<br />}<br />.google-plus-mais-t100 {<br />font-size:50px;<br />}<br />.t100 {<br /> width: 100px;<br /> height: 100px;<br /> border-width: 1px;<br /> line-height: 64px;<br /> text-shadow: 0 -1px 0 rgba(0,0,0,0.5);<br /> border-radius: 5px;<br /> -moz-border-radius: 5px;<br />}<br />.fl {<br /> float: left;<br /> margin-right: 20px;<br />}</blockquote></div><h2> Efeito <span style="background-color: transparent;">final</span></h2><style>#google-plus-t32 { font-family:Georgia, "Times New Roman", Times, serif; background: #d04329; color: #fff; text-align: center; border: 0px solid #072266; font-weight: normal; font-size: 25px; line-height: 24px; position: relative; box-shadow: 0 0 4px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4); } .google-plus-mais-t32 { font-size:15px; } .t32 { width: 32px; height: 32px; border-width: 1px; line-height: 64px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); border-radius: 3px; -moz-border-radius: 5px; } #google-plus-t64 { font-family:Georgia, "Times New Roman", Times, serif; background: #d04329; color: #fff; text-align: center; border: 0px solid #072266; font-weight: normal; font-size: 60px; line-height: 45px; position: relative; box-shadow: 0 0 4px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4); } .google-plus-mais-t64 { font-size:30px; } .t64 { width: 64px; height: 64px; border-width: 1px; line-height: 64px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); border-radius: 5px; -moz-border-radius: 5px; } #google-plus-t100 { font-family:Georgia, "Times New Roman", Times, serif; background: #d04329; color: #fff; text-align: center; border: 0px solid #072266; font-weight: normal; font-size: 100px; line-height: 60px; position: relative; box-shadow: 0 0 4px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4); } .google-plus-mais-t100 { font-size:50px; } .t100 { width: 100px; height: 100px; border-width: 1px; line-height: 64px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); border-radius: 5px; -moz-border-radius: 5px; } .fl { float: left; margin-right: 20px; } </style> <br /><br /><div class="t100 fl" id="google-plus-t100">g<span class="google-plus-mais-t100">+</span></div><div class="t64 fl" id="google-plus-t64">g<span class="google-plus-mais-t64">+</span></div><div class="t32 fl" id="google-plus-t32">g<span class="google-plus-mais-t32">+</span></div><br /><br /><br /><br /><br /><style>#google-plus { font-family:Georgia, "Times New Roman", Times, serif; background: #d04329; color: #fff; border: 0px solid #072266; font-weight: normal; text-align:center; font-size: 60px; line-height: 45px; position: relative; } #google-plus:active { box-shadow:inset 1px 2px 4px rgba(0,0,0,0.4); -moz-box-shadow:inset 1px 2px 4px rgba(0,0,0,0.4); -webkit-box-shadow:inset 1px 2px 4px rgba(0,0,0,0.4); } a { text-decoration:none; } .google-plus-mais { font-size:30px; } .t128 { width: 128px; height: 128px; border-width: 3px; line-height: 128px; text-shadow: 0 -2px 0 rgba(0,0,0,0.5); border-radius: 10px; -moz-border-radius: 10px; } .t64 { width: 64px; height: 64px; border-width: 1px; line-height: 64px; border-radius: 5px; -moz-border-radius: 5px; } .t32 { width: 32px; height: 32px; border-width: 1px; line-height: 32px; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); border-radius: 3px; -moz-border-radius: 3px; } .fl { float: left; margin-right: 20px; } </style> <br /><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy5ibG9nZ2VyLmNvbS9ibG9nZ2VyLmc/YmxvZ0lEPTEzOTg1MzgzMTYzNjcxMDQ2OTkj"></a><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-16932969347234500272012-05-05T15:57:01.153-07:002012-05-05T15:57:20.382-07:00Formulário de pesquisa simples e em diversas cores usando CSS3 e HTML5 A gente, do CSS ao Extremo, criamos pra você um simples formuláiro de pesquisa em diversas cores. Usando CSS3 para as sombras e HTML5 para o <i>placeholder</i><b> </b>e <i>x-webkit-speech</i>, o formulário é elegante (mesmo sendo simples). Nas cores laranja, azul, vermelho, amarelo, verde e cinza, você escolhe o melhor para o seu site.<br /><br /><div style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9Gb3JtdWwlQzMlQTFyaW8lMjBkZSUyMHBlc3F1aXNhJTIwc2ltcGxlcy5odG1s" target="_blank"><span style="font-size: large;">Clique aqui e veja os exemplos</span></a></div><br /><h2> HTML (Blogger)</h2><blockquote class="tr_bq"><div class="pesquisa-form"><br /><form name="imput" action="/search" method="get"><br /><input type="text" class="mini-search" name="q" x-webkit-speech="true" placeholder="Faça uma busca..."/><br /><input class="pesquisa-submit-laranja" type="submit" name="submit" value="Pesquisar" /></form><br /></div></blockquote><br /><h2> HTML (WordPress)</h2><blockquote class="tr_bq"><div class="pesquisa-form"><br /><form method=”get” action=”/index.php”><br /><input class="mini-search" type=”text” name=”s” x-webkit-speech="true" placeholder="Faça uma busca..."/><br /><input class="pesquisa-submit-cinza" type="submit" value="Pesquisar" /></form><br /></div></blockquote><div><div><h2> CSS laranja</h2></div><div><blockquote class="tr_bq">/* --- Pesquisa Laranja --- */<br />.pesquisa-submit-laranja{<br />height:37px;<br />position:relative;<br />left:-4px;<br />color:#fff;<br />font-size:15px;<br />margin-left:-3px;<br />width:92px;<br />line-height:1.2em;<br />background: #f77f2a;<br />border: 1px solid #eca958;<br />-o-border-top-right-radius:5px;<br />-o-border-bottom-right-radius:5px;<br />-webkit-border-top-right-radius:5px;<br />-webkit-border-bottom-right-radius:5px;<br />-moz-border-radius-topright:5px;<br />-moz-border-radius-bottomright:5px;<br />border-top-right-radius:5px;<br />border-bottom-right-radius:5px<br />}<br />.pesquisa-submit-laranja:active {<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}</blockquote></div></div><div><div><h2> CSS azul</h2></div><div><blockquote class="tr_bq">/* --- Pesquisa Azul --- */<br />.pesquisa-submit-azul{<br />height:37px;<br />position:relative;<br />left:-4px;<br />color:#fff;<br />font-size:15px;<br />margin-left:-3px;<br />width:92px;<br />line-height:1.2em;<br />background: #2d56b1;<br />border: 1px solid #2d56b1;<br />-o-border-top-right-radius:5px;<br />-o-border-bottom-right-radius:5px;<br />-webkit-border-top-right-radius:5px;<br />-webkit-border-bottom-right-radius:5px;<br />-moz-border-radius-topright:5px;<br />-moz-border-radius-bottomright:5px;<br />border-top-right-radius:5px;<br />border-bottom-right-radius:5px<br />}<br />.pesquisa-submit-azul:active {<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}</blockquote></div></div><div><div><h2> CSS vermelho</h2></div><div><blockquote class="tr_bq">/* --- Pesquisa Vermelho --- */<br />.pesquisa-submit-vermelho{<br />height:37px;<br />position:relative;<br />left:-4px;<br />color:#fff;<br />font-size:15px;<br />margin-left:-3px;<br />width:92px;<br />line-height:1.2em;<br />background: #e63f38;<br />border: 1px solid #e63f38;<br />-o-border-top-right-radius:5px;<br />-o-border-bottom-right-radius:5px;<br />-webkit-border-top-right-radius:5px;<br />-webkit-border-bottom-right-radius:5px;<br />-moz-border-radius-topright:5px;<br />-moz-border-radius-bottomright:5px;<br />border-top-right-radius:5px;<br />border-bottom-right-radius:5px<br />}<br />.pesquisa-submit-vermelho:active {<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}</blockquote></div></div><div><div><h2> CSS amarelo</h2></div><div><blockquote class="tr_bq">/* --- Pesquisa Amarelo --- */<br />.pesquisa-submit-amarelo{<br />height:37px;<br />position:relative;<br />left:-4px;<br />color:#fff;<br />font-size:15px;<br />margin-left:-3px;<br />width:92px;<br />line-height:1.2em;<br />background: #e6b222;<br />border: 1px solid #e6b222;<br />-o-border-top-right-radius:5px;<br />-o-border-bottom-right-radius:5px;<br />-webkit-border-top-right-radius:5px;<br />-webkit-border-bottom-right-radius:5px;<br />-moz-border-radius-topright:5px;<br />-moz-border-radius-bottomright:5px;<br />border-top-right-radius:5px;<br />border-bottom-right-radius:5px<br />}<br />.pesquisa-submit-amarelo:active {<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}</blockquote></div><div><h2> CSS verde</h2></div><div><blockquote class="tr_bq">/* --- Pesquisa Verde --- */<br />.pesquisa-submit-verde{<br />height:37px;<br />position:relative;<br />left:-4px;<br />color:#fff;<br />font-size:15px;<br />margin-left:-3px;<br />width:92px;<br />line-height:1.2em;<br />background: #3ca33a;<br />border: 1px solid #3ca33a;<br />-o-border-top-right-radius:5px;<br />-o-border-bottom-right-radius:5px;<br />-webkit-border-top-right-radius:5px;<br />-webkit-border-bottom-right-radius:5px;<br />-moz-border-radius-topright:5px;<br />-moz-border-radius-bottomright:5px;<br />border-top-right-radius:5px;<br />border-bottom-right-radius:5px<br />}<br />.pesquisa-submit-verde:active {<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}</blockquote></div><div><h2> CSS cinza</h2></div><div><blockquote class="tr_bq">/* --- Pesquisa Cinza --- */<br />.pesquisa-submit-cinza{<br />height:37px;<br />position:relative;<br />left:-4px;<br />color:#fff;<br />font-size:15px;<br />margin-left:-3px;<br />width:92px;<br />line-height:1.2em;<br />background: #bfbfbf;<br />border: 1px solid #bfbfbf;<br />-o-border-top-right-radius:5px;<br />-o-border-bottom-right-radius:5px;<br />-webkit-border-top-right-radius:5px;<br />-webkit-border-bottom-right-radius:5px;<br />-moz-border-radius-topright:5px;<br />-moz-border-radius-bottomright:5px;<br />border-top-right-radius:5px;<br />border-bottom-right-radius:5px<br />}<br />.pesquisa-submit-cinza:active {<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}</blockquote></div></div><div><h2> CSS do campo de pesquisa</h2></div><div><div><blockquote class="tr_bq">.mini-search {<br />height:37px;<br />padding:4px;<br />-moz-border-top-left-radius:5px;<br />-moz-border-bottom-left-radius:5px;<br />-webkit-border-top-left-radius:5px;<br />-webkit-border-bottom-left-radius:5px;<br />border-top-left-radius:7px;<br />border-bottom-left-radius:7px;<br />border:1px solid #ccc;<br />width:25%;<br />text-shadow:0 0 1px #ccc;<br />font-size:14px;<br />box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />-o-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.4);<br />}<br />input {outline: none !important;}</blockquote></div></div><div><br /></div>São diversas cores a sua escolha.<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-79734039987533104962012-05-05T15:57:01.151-07:002012-05-05T15:57:20.353-07:00Ícones sociais feitos com puro CSS Bom, temos aqui alguns ícones das principais redes sociais do mundo. Num post anterior, você viu como se cria o ícone do Google+ (<a href="http://c-lien.blogspot.com/?aHR0cDovL2Nzc2V4dHJlbW8uYmxvZ3Nwb3QuY29tLzIwMTIvMDEvaWNvbmUtZG8tZ29vZ2xlLWZlaXRvLWNvbS1wdXJvLWNzcy5odG1s" target="_blank">exclusivo</a>) e hoje trazemos o ícone em sua segunda versão. Além do Google+, temos ícones do Facebook, Twitter, Feed e Orkut.<br /><br /><div style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9JY29uZXMtc29jaWFpcyUyMC1jb20tcHVyby1DU1MuaHRtbA==" target="_blank"><span style="font-size: large;">Clique aqui e veja os exemplos</span></a></div><br />O post seria muito grande com o CSS e o HTML repetido, portanto, hospedamos em nosso servidor para download.<br /><br /><br /><br /><center><style>#blog { font-family:Arial, Georgia, "Times New Roman", Times, serif; background: #f77f2a; color: #fff; font-weight: normal; text-align:center; font-size: 30px; line-height: 45px; position: relative; } #blog a{ color:#FFF; } #blog:active { box-shadow:inset 1px 2px 4px rgba(0,0,0,0.4); -moz-box-shadow:inset 1px 2px 4px rgba(0,0,0,0.4); -webkit-box-shadow:inset 1px 2px 4px rgba(0,0,0,0.4); } .blo { width: 284px; height: 44px; border-width: 1px; border-radius: 5px; -moz-border-radius: 5px; } </style><div class="blo" id="blog"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9Eb3dubG9hZHMvUGFjb3RlJTIwZGUlMjAlQzMlOERjb25lcyUyMGRlJTIwUmVkZXMlMjBTb2NpYWlzJTIwZmVpdG9zJTIwY29tJTIwcHVybyUyMENTUy5yYXI=" target="_blank">fazer download</a></div></center><br /><h2> Entendendo o CSS</h2><div>Começamos com uma simples lista de links, cada link contendo um texto. Depois, foi dado estilos a cada link para assumir a aparência do ícone da mídia social.</div><div><br /></div><div>Este é um experimento que usa CSS 2.1 e CSS3 que não é suportado pelo Internet Explorer 6 e 7, portanto, você não deve esperar que ele funcione nesse navegador.</div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-68334989673927906602012-05-05T15:57:01.149-07:002012-05-05T15:57:20.321-07:00Estilizando, com CSS, um simples menu Neste rápido tutorial, vamos aprender a como criar um efeito de menu simples feito com puro CSS.<br /><br />Vamos criar uma linha horizontal em forma de quadrado com links dentro. Quando passamos o mouse sobre um desses quadrados, ele vai se elevar de forma suave e o texto irá aumentar de tamanho, além de ficar em <b>negrito</b>.<br /><br /><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9NZW51JTIwRXN0aWxpemFkbyUyMDEuaHRtbA==" target="_blank">Clique aqui e veja o exemplo</a></span></div><br /><h2> HTML</h2>Vamos começar pelo HTML, é fácil e simples. Vamos apenas fazer uma lista não ordenada e colocar um ID chamado <b>menu1</b>.<br /><div><blockquote class="tr_bq"><ul id="menu1"><br /> <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 1</a></li><br /> <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 2</a></li><br /> <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 3</a></li><br /> <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 4</a></li><br /> <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 5</a></li><br /> <li><a href="http://c-lien.blogspot.com/?Iw==">Teste 6</a></li><br /></ul></blockquote></div><div><h2> CSS</h2>Usamos bordas para o efeito nos quadrados em estado <b>hover</b>.</div><div><blockquote class="tr_bq">ul#menu1 {<br /> display: inline;<br /> list-style: none;<br />}<br />ul#menu1 li {<br /> float: left;<br /> width: 60px;<br /> height:60px;<br />}<br />ul#menu1 li a {<br /> width: auto;<br /> height:45px;<br /> padding:5px;<br /> display:block;<br /> color:#fff;<br /> text-decoration: none;<br /> font-size:8pt;<br /> font-family:arial;<br /> line-height:50px;<br /> text-align:center;<br /> border-right:1px solid #fff;<br /> border-left:1px solid #fff;<br /> border-top: 5px solid #fff;<br /> border-bottom: 5px solid #fff;<br /> background: #bcbfc3;<br /> -webkit-transition: all 0.2s linear;<br /> -moz-transition: all 0.2s linear;<br /> -o-transition: all 0.2s linear;<br /> transition: all 0.2s linear;<br />}<br />ul#menu1 li a:hover {<br /> border-top: 5px solid #85888b;<br /> border-bottom: 5px solid #85888b;<br /> background:#85888b;<br /> font-size:9pt;<br /> font-weight:bold;<br />}</blockquote></div><div>Simplicidade. Esse é o foco do menu, bem simples e ao mesmo tempo bem elegante.</div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-72220296798664446982012-05-05T15:57:01.147-07:002012-05-05T15:57:20.296-07:00Entenda um pouco mais sobre o CSS A linguagem HTML cresceu, e com isso, abrange uma maior variedade de recursos estilísticos para atender às demandas de desenvolvedores web. Com tais capacidades, as folhas de estilo se tornaram menos importantes e uma linguagem externa, para definição de atributos de estilo, não era aceita até o desenvolvimento do CSS.<br /><br /><h2> Problemas com a interpretação do CSS</h2>Muitas implementações de CSS são repletas de inconsistências, erros e outras peculiaridades. Os autores geralmente tinham que achar soluções alternativas, a fim de obter resultados consistentes em navegadores e plataformas.<br /><br />Um dos maiores erros conhecidos pelo CSS é o Internet Explorer. Exemplo: larguras de formulários são interpretadas de forma incorreta em várias versões do navegador. O que era esperado na maioria dos navegadores se torna estreito quando visualizado no Internet Explorer.<br /><br />Esta é apenas uma das centenas de erros do Internet Explorer, que reduz a legibilidade dos documentos. Isso se tornou uma dor de cabeça para os designers que precisam de uma aparência consistente em todas as plataformas.<br /><br />O Internet Explorer continua sendo o pior na renderização de CSS para os padrões estabelecidos pela World Wide Web Consortium, mas ainda é o mais utilizado do mundo.<br /><br /><h2> Alguns avanços</h2>Passados anos, o CSS já está na sua versão 3. Há muitas funcionalidades a ser exploradas, tais funcionalidades podem substituir o uso do JavaScript e do Flash.<br /><br /><h2> Funcionalidades e uso do CSS</h2>O CSS é projetado para permitir a separação entre estilo e estrutura. Antes do CSS, quase todos os atributos de estilo de um documento HTML estavam contidos dentro do código HTML: todas as cores de fonte, estilos de fundo, alinhamentos de elementos, bordas e tamanhos tiveram que ser descritos, muitas vezes, repetidamente no meio do código HTML.<br /><br />O CSS permite aos autores mover grande parte da informação para uma folha de estilo, resultando em um simples código HTML. Os documentos HTML se tornaram muito menores e os browsers tem suportes ao CSS. Isto leva a uma redução no tráfego de rede e os sites ficam visivelmente mais rápidos.<br /><br />Antes do CSS, os autores que queriam atribuir uma cor específica, tipo de letra, tamanho, ou outra característica à um título, tinham que usar o elemento <b>font</b>.<br /><br /><h2> CSS em poucas palavras</h2>O CSS é usado por ambos os autores e leitores de páginas web para definir cores, fontes, <i>layouts</i> e outros aspectos de estilo do documento. É projetado principalmente para permitir a separação da estrutura do documento, HTML ou uma linguagem semelhante, e do estilo, CSS.<br /><br />O CSS permite o controle completo e total sobre o estilo de um documento HTML. Hoje, o CSS é um avanço da web. Os navegadores mais e mais estão a dar suportes a ele.<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-50164069384005744672012-05-05T15:57:01.145-07:002012-05-05T15:57:20.263-07:00Mensagem desfocada criado com puro CSS Bom, eu encontrei esse efeito no site <b><a href="http://c-lien.blogspot.com/?aHR0cDovL3NpbXVyYWkuY29tLw==" target="_blank">simurai.com</a> </b>e decide compartilhar com vocês. Um efeito, na minha opinião, sensacional.<br /><br /><div style="text-align: center;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9UZXh0b0Rlc2ZvY2Fkby5odG1s" target="_blank"><span style="font-size: large;">Clique aqui e veja o exemplo</span></a></div><br /><h2> Entendendo o CSS</h2>Tudo se baseia no desfoque. O texto, em estado normal, fica completamente desfocado, ilegível. No estado <b>hover</b>, o desfoque diminui, assim, podendo ler a mensagem. Além disso, não é usado nem tipo de imagem, é tudo criado com o puro CSS.<br /><blockquote>.txt {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>color: transparent;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>text-shadow: #fff 0 0 100px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);<br />}<br />#box {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: rgba(0, 0, 0, 0.3);<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>padding: 80px 100px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>text-align: center;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>width: 500px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-border-radius: 20px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>font-size: 5em;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>font-weight: bold;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 80px auto 20px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>border:1px solid white;<br />}<br />#box:hover .txt {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>text-shadow: #fff 0 0 5px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1);<br />}<br />.heart {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0 10px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>color: transparent;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>text-shadow: red 0 0 8px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transition: text-shadow 1s cubic-bezier(0, 1, 0, 1);<br /><span class="Apple-tab-span" style="white-space: pre;"> </span><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-animation-name: pulse-animation;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-animation-duration: 1s;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-animation-iteration-count: infinite;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-animation-timing-function: ease-in-out;<br />}<br />@-webkit-keyframes pulse-animation {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>0% { opacity: 1; }<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>50% { opacity: 0.8; }<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>100% { opacity: 1; }<br />}<br />#box:hover .heart {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: 0 5px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>text-shadow: red 0 0 100px;<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>-webkit-transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1);<br />}<br />#box span:nth-child(3):focus {<br /><span class="Apple-tab-span" style="white-space: pre;"> </span>outline: none;<br />}</blockquote><br /><h2> HTML</h2><blockquote class="tr_bq"><div id="box"><br /><span class="txt">I</span><span class="heart">&hearts;</span><span class="txt" contenteditable="true">YOU</span><br /></div></blockquote><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-44162315236112539512012-05-05T15:57:01.143-07:002012-05-05T15:57:20.234-07:00Balão feito apenas com CSS <div class="tr_bq">Sabe aqueles balãozinhos de gibis, onde ficam as falas dos personagens? Então, vamos fazer um parecido usando apenas bordas.</div><br />Usando as técnicas do <b>border-radius</b>, teremos o resultado esperado.<br /><br /><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9CYWxhb0ZlaXRvQ29tQ1NTLmh0bWw=" target="_blank">Clique aqui e veja o exemplo</a></span></div><br /><h2> HTML</h2><blockquote class="tr_bq"><div class="balao"><br /><div class="pont"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="um"></div><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="dois"></div><br /></div><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><div class="conteeudo"><br /><span class="Apple-tab-span" style="white-space: pre;"> </span><p>Quer tentar algo novo?</p><br /></div><br /></div></blockquote><br /><h2>Webfont</h2><blockquote class="tr_bq"><link href="http://c-lien.blogspot.com/?aHR0cDovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9T3BlbitTYW5z" rel='stylesheet' type='text/css'/></blockquote><br /><h2> CSS</h2><blockquote>.balao {<br />width:300px;<br />color:#efefef;<br />background: #ffffff;<br />}<br /><br />.balao .pont {<br />height:15px;<br />background:#393939;<br />}<br /><br />.balao .pont .um {<br />height:100%;<br />background:#ffffff;<br />width:50%;<br />-moz-border-radius-bottomright: 14px;<br />-webkit-border-bottom-right-radius:14px;<br />-o-border-radius-bottomright: 14px;<br />border-radius-bottomright: 14px;<br />float:left;<br />}<br /><br />.balao .pont .dois {<br />height:100%;<br />background:#ffffff;<br />width:50%;<br />float:right;<br />-moz-border-radius-bottomleft: 14px;<br />-webkit-border-bottom-left-radius:14px;<br />-o-border-bottom-left-radius:14px;<br />border-bottom-left-radius:14px;<br />}<br /><br />.balao .conteeudo {<br />padding:5px;<br />-moz-border-radius: 10px;<br />-webkit-border-radius:10px;<br />-o-border-radius: 10px;<br />border-radius: 10px;<br />background:#393939;<br />text-align:center;<br />font-size:21px;<br />font-family:'Open Sans' ,Arial, Thoma;<br />text-shadow:0 0 3px #FFF;<br />box-shadow:2px 2px 2px gray;<br />}</blockquote><br />Repare no <b>border-radius</b>, eles é que dão a "ponta" o balão.<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com1tag:blogger.com,1999:blog-5128765784236639759.post-86556686058017607922012-05-05T15:57:01.141-07:002012-05-05T15:57:20.210-07:00Efeito de pulso criado com CSS3 Neste tutorial, vamos criar um efeito de pulso utilizando CSS. Será usado a <b>keyframe </b>do<b> </b>CSS3.<br /><br />Agora vamos passar para parte do HTML e CSS deste artigo. Nós apenas precisamos de cinco <b>div </b>e temos de dar estilo à essas <b>div</b>.<br /><br /><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9FZmVpdG9EZVB1bHNvQ1NTMy5odG1s" target="_blank">Clique aqui e veja o exemplo</a></span></div><br /><h2> HTML</h2><blockquote class="tr_bq"><div class="marca"><br /> <div class="circulo"><br /> <div class="pulso1"></div><br /> <div class="pulso2"></div><br /> <div class="pulso3"></div><br /> </div><br /></div></blockquote>Os nomes das classe são explicativos: a classe <b>marca </b>é o ponto de marcação e a <b>circulo </b>vai ajustar o círculo central.<br /><br /><h2> CSS</h2><blockquote class="tr_bq">@-webkit-keyframes pulse<br /> { <br /> 0% {-webkit-transform: scale(0); opacity: 0;}<br /> 8% {-webkit-transform: scale(0); opacity: 0;}<br /> 15% {-webkit-transform: scale(0.1); opacity: 1;}<br /> 30% {-webkit-transform: scale(0.5); opacity: 1;}<br /> 100% {opacity: 0; -webkit-transform: scale(1);}<br /> }<br /><br />@-moz-keyframes pulse<br /> { <br /> 0% {-moz-transform: scale(0); opacity: 0;}<br /> 8% {-moz-transform: scale(0); opacity: 0;}<br /> 15% {-moz-transform: scale(0.1); opacity: 1;}<br /> 30% {-moz-transform: scale(0.5); opacity: 1;}<br /> 100% {opacity: 0; -moz-transform: scale(1);}<br /> }<br /><br /> .marca<br /> {<br /> display: block;<br /> position: absolute;<br /> top: 40%;<br /> left: 45%;<br /> }<br /><br /><br /> .marca .circulo<br /> {<br /> width: 96px;<br /> height: 96px;<br /> background: #a1bae2;<br /> border-radius: 100px;<br /> box-shadow:0 0 5px #a1bae2;<br /> }<br /><br /> .marca .pulso1<br /> {<br /> margin: 0 auto;<br /> border-radius: 100px;<br /> position: absolute;<br /> right: -26px;<br /> top: -26px;<br /> z-index: 10;<br /> background-color: transparent;<br /> opacity: 0.1;<br /> width: 144px;<br /> height: 144px;<br /> border: 2px solid #a1bae2;<br /> -webkit-border-radius: 100px;<br /> -moz-border-radius: 100px;<br /> -o-border-radius: 100px;<br /> -ms-border-radius: 100px;<br /> border-radius: 100px;<br /> /* Giving Animation Function */<br /> -webkit-animation: pulse 2s linear infinite;<br /> -moz-animation: pulse 2s linear infinite;<br /> border-image: initial;<br /> box-shadow:0 0 5px #a1bae2;<br /> }<br /><br /> .marca .pulso2<br /> {<br /> margin: 0 auto;<br /> border-radius: 100px;<br /> position: absolute;<br /> right: -41px;<br /> top: -41px;<br /> z-index: 10;<br /> background-color: transparent;<br /> opacity: 0.1;<br /> width: 174px;<br /> height: 174px;<br /> border: 2px solid #a1bae2;<br /> -webkit-border-radius: 100px;<br /> -moz-border-radius: 100px;<br /> -o-border-radius: 100px;<br /> -ms-border-radius: 100px;<br /> border-radius: 100px;<br /> /* Giving Animation Function */<br /> -webkit-animation: pulse 2s linear infinite;<br /> -moz-animation: pulse 2s linear infinite;<br /> border-image: initial;<br /> box-shadow:0 0 5px #a1bae2;<br /> }<br /><br /> .marca .pulso3<br /> {<br /> margin: 0 auto;<br /> border-radius: 100px;<br /> position: absolute;<br /> right: -58px;<br /> top: -58px;<br /> z-index: 10;<br /> background-color: transparent;<br /> opacity: 0.1;<br /> width: 208px;<br /> height: 208px;<br /> border: 2px solid #a1bae2;<br /> -webkit-border-radius: 100px;<br /> -moz-border-radius: 100px;<br /> -o-border-radius: 100px;<br /> -ms-border-radius: 100px;<br /> border-radius: 100px;<br /> /* Giving Animation Function */<br /> -webkit-animation: pulse 2s linear infinite;<br /> -moz-animation: pulse 2s linear infinite;<br /> border-image: initial;<br /> box-shadow:0 0 5px #a1bae2;<br /> }</blockquote>Isto é o que você pode fazer com o efeito de animação keyframe.<br /><div><br /></div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-82893020019052149652012-05-05T15:57:01.139-07:002012-05-05T15:57:20.191-07:00Efeito de arco-íris em texto criado com CSS Neste rápido artigo, vamos criar um efeito muito parecido com o arco-íris. O efeito em questão usa as propriedades gradiente do CSS3, assim, deixando-o muito legal.<br /><style>.texto-c { font-size:36px; -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-color:#FFF; background-image: -webkit-gradient(linear,left top,right top,from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79); background-image: -moz-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79); background-image: -ms-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79); background-image: -o-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79); } </style><br /><h1 class="texto-c" style="text-align: center;"> CSS ao Extremo; Vamos tentar algo novo?</h1><h2>HTML</h2><blockquote class="tr_bq"><h1 class="texto-c">CSS ao Extremo; Vamos tentar algo novo?</h1></blockquote><h2>CSS</h2><blockquote class="tr_bq">.texto-c {<br /> font-size:36px;<br /> -webkit-background-clip: text;<br /> color: white;<br /> -webkit-text-fill-color: transparent;<br /> background-color:#FFF;<br /> background-image: -webkit-gradient(linear,left top,right top,from(#ea8711), to(#d96363));<br /> background-image: -webkit-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);<br /> background-image: -moz-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);<br /> background-image: -ms-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);<br /> background-image: -o-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);<br />}</blockquote>Obs: Este efeito foi testado apenas no Google Chrome, diga-nos se ele funciona em outros navegadores.<div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-71817649300585325492012-05-05T15:57:01.137-07:002012-05-05T15:57:20.172-07:00Menu feito com CSS Transições do CSS3 e pseudo-elementos do CSS2 formam um menu de navegação animado. O IE8 e IE9 não suportam as transições do CSS3, portanto, o menu não terá animação nesses navegadores.<br /><br /><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cDovL2RsLmRyb3Bib3guY29tL3UvNDQ5MTg2MTUvZXh0cmVtby9FeGVtcGxvcy9NZW51LWZlaXRvLWNvbS1DU1MuaHRtbA==" target="_blank">Clique aqui e veja o exemplo</a></span></div><br /><h2> HTML</h2><blockquote class="tr_bq"><div class='menuCSS'><br /> <a href="http://c-lien.blogspot.com/?Iw=="><span>Início</span></a><br /> <a href="http://c-lien.blogspot.com/?Iw=="><span>Sobre</span></a><br /> <a href="http://c-lien.blogspot.com/?Iw=="><span>Serviços</span></a><br /> <a href="http://c-lien.blogspot.com/?Iw=="><span>Contato</span></a><br /></div></blockquote><br /><h2> CSS</h2><blockquote>.menuCSS {<br /> display:inline-block;<br />}<br /><br />.menuCSS:after, .menuCSS:before {<br /> margin-top:0.5em;<br /> content: "";<br /> float:left;<br /> border:1.5em solid #FFF;<br />}<br /><br />.menuCSS:after {<br /> border-right-color:transparent;<br />}<br /><br />.menuCSS:before {<br /> border-left-color:transparent;<br />}<br /><br />.menuCSS a:link, .menuCSS a:visited {<br /> color:#000;<br /> text-decoration:none;<br /> float:left;<br /> height:3.5em;<br /> overflow:hidden;<br /> font-family:Arial;<br />}<br /><br />.menuCSS span {<br /> background:#FFF;<br /> display:inline-block;<br /> line-height:3em;<br /> padding:0 1em;<br /> margin-top:0.5em;<br /> position:relative;<br /> -webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */<br /> -moz-transition: background, margin 0.2s; /* FF4+ */<br /> -ms-transition: background, margin 0.2s; /* IE10 */<br /> -o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */<br /> transition: background, margin 0.2s;<br />}<br /><br />.menuCSS a:hover span {<br /> background:#FFD204;<br /> margin-top:0;<br />}<br /><br />.menuCSS span:before {<br /> content: "";<br /> position:absolute;<br /> top:3em;<br /> left:0;<br /> border-right:0.5em solid #9B8651;<br /> border-bottom:0.5em solid #fff;<br />}<br /><br />.menuCSS span:after {<br /> content: "";<br /> position:absolute;<br /> top:3em;<br /> right:0;<br /> border-left:0.5em solid #9B8651;<br /> border-bottom:0.5em solid #fff;<br />}</blockquote><br /><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0tag:blogger.com,1999:blog-5128765784236639759.post-28251281151540368682012-05-05T15:57:01.135-07:002012-05-05T15:57:20.143-07:00Três animações feitas com CSS Todos nós sabemos que o CSS3 tem muitos recursos e um dos recursos mais divertidos e surpreendentes são as animações, que futuramente <strike>irão</strike> poderão substituir o Flash.<br /><br />Listei três exemplos de animações que permitem descobrir as possibilidades e a usabilidade do CSS3.<br /><div><div style="text-align: center;"><br /></div></div><div><div><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZGVtb3MvZGV0YWlsL3RoZS1sZXR0ZXItaGVhZHMvbGF1bmNo" rel="nofollow" target="_blank">The Letter-Heads</a></span></div></div></div><div><div><div style="text-align: center;">Experiência interativa com sombras.</div></div></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-p6ChrNW5i6U/T3ItmWVZASI/AAAAAAAABFY/pUPJrud-H48/s1600/1.jpg" /></div><br /><br /><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZGVtb3MvZGV0YWlsL3JvZm94LWNzczMtYW5pbWF0aW9uLWJ5LWFudGhvbnktY2FsemFkaWxsYS9sYXVuY2g=" rel="nofollow" target="_blank">Rofox CSS3 Animation</a></span></div><div><div><div style="text-align: center;">Experiência com a espaçonave do Firefox.</div></div></div><div style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://3.bp.blogspot.com/-0FExI4mwF0A/T3ItnOpHwRI/AAAAAAAABFg/AOPLyWx83lU/s1600/2.jpg" /></div><br /></div><div><div style="text-align: left;"><br /></div><div style="text-align: center;"><span style="font-size: large;"><a href="http://c-lien.blogspot.com/?aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZGVtb3MvZGV0YWlsL2JhdHRsZWZpZWxkLWNzczMvbGF1bmNo" rel="nofollow" target="_blank">Battlefield CSS3</a></span></div><div><div><div style="text-align: center;">Um filme curto, com explosões e tiros.</div></div></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-TdQbldSWMtM/T3ItoHJjSuI/AAAAAAAABFo/yDmmjV64HF0/s1600/3.jpg" /></div></div><div class="blogger-post-footer"></div>Anonymoushttp://www.blogger.com/profile/06110740654489405637noreply@blogger.com0