5 Online Logo Makers & Generators to Design Your Brand You have a product that will fly off the shelves, but are struggling with your branding. You need a logo but don’t have any idea about how to design a great one. You could hire a designer, but you don’t want to spend all of your startup costs on your logo. This is a side project for you after all. What do you do? We’ve got you covered. You’ll be up and running with a beautiful logo in no time. Bonus Guide: Eager to make your first sale online? Why A Logo is Important For Your Brand Logos act as the “face” of your business. While Shopify does automatically generate text based logos for you, it’s still important to have a custom logo to define your brand and make your store stand out from the competition. Logo Design 101 DesignBuddy recently did a fantastic data analysis on the world’s top brands, and what their logos have in common. 95% of the world’s top brand’s logos use one or two colors41% of the brands use stylized type as their logo93% are simple enough to be recognized at smaller sizes
Div et CSS : une mise en page rapide et facile Tout au long de cet exercice, nous allons utiliser deux fichiers : index.html : contiendra tout notre code HTML. style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> : Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS : Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align). Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page Nous alons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs : Bandeau : 600 x 50 px - couleur : #00CCFF Contenu : 600 x 400 px - couleur : #FFCC00 Pied de page : 600 x 50 px - couleur : #33FF99 Mais, mais, mais !!!
Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead. Enjoy
Mettre en place le CSS Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu). Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attributstylesur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe). Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises : l'attributclass;l'attributid. Que les choses soient claires dès le début : les attributsclassetidsont quasiment identiques. Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc. Oui mais que met-on comme valeur à l'attributclass? <! Quel intérêt ? Les balises universelles
HTML Cheat Sheet (including new HTML5 tags) for Beginners How many times have you Googled: “how to add forms in HTML” or “what are new HTML5 tags” … only to end up twenty minutes later staring blankly at 30 new browser tabs, forgetting what got you here in the first place? Remembering each HTML element off the top of your head at a moment’s notice is impossible. So instead of falling down yet another Google blackhole, use this HTML cheat sheet page as your go-to web development resource when learning HTML, CSS, PHP or Javascript. #1 HTML CHEAT SHEET in .PDF Download .PDF (size: 151kb) #2 HTML CHEAT SHEET in .PNG Download .PNG (size: 1.8mb) Further resources: If you already know a bit about HTML, go and check our Web Development & Design guide here. If you want to speed up your website (without changing web host), check this post. If you want to make your website more secure, go see this guide.
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Les classes de style (CSS) Septembre 2017 Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. La définition des classes est aussi simple que celles des styles. Où « Nom-de-la-classe » représente le nom donné à la classe. Appel d'une classe Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise : Soit la classe Rouge appliquée à la balise b : L'appel à cette classe dans le code se fera de la façon suivante : <B class="Rouge"> Texte à mettre en rouge et en gras </B> Les classes universelles Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! Soit la classe « important » suivante : L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide : <h1 class="important">Attention ceci est un avertissement</h1><i class="important">(prière d'en tenir compte)</i>
Débuter avec HTML + CSS Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS. Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela: Page HTML résultante, couleurs et disposition effectuées avec CSS. Notez que je ne prétends pas que c'est joli :) Voici un exemple de section optionelle. Etape 1: Le langage HTML Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas lire. <! Le <body> est l'emplacement du texte à proprement parler de notre document. <!
Feuille de style CSS de base par l'exemple - CSS Débutants Une feuille de style CSS externe peut se faire avec le simple bloc-note, et il est d'usage de lui faire porter l'extension .css (style.css par exemple). On la liera ensuite à la page html à l'aide d'un link placé dans l'en-tête de la page (pas de panique ! la méthode est expliquée en dessous). Partons donc à la découverte d'une première feuille de style... Sommaire Structure de base Pour chaque déclaration, la structure est toujours la même : Le sélecteur, c'est la balise (X)HTML (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class) ;La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.) Exemple de feuille de style Fonctionne avec : Tous les navigateurs graphiques Propriétés utilisées : background-color color font-family ; font-size padding text-align ; text-decoration Cet exemple de feuille de style (encore une fois, de base) donnera une page : Code CSS Code (X)HTML Voir le résultat Haut Notion de cascades ... Enregistrement d'une feuille de style 1. 2. 3.