public marks

PUBLIC MARKS from decembre with tags web & css

2018

CSS - CODEPEN - COLLECTION - A Look At Pseudo-Elements - a Collection by Franz on CodePen

A Look At Pseudo-Elements This collection contains many examples for different pseudo-elements. All examples were used in episode 15 of !important a show that explores web development through live websites and elegant designs. https://xotv.me/channels/22-important/vod_videos/767-important-slash-slash-episode-fifteen

DEV - FORMATION - Thimble par Mozilla — Un éditeur de code en ligne pour apprendre et enseigner

(via)
Thimble est un éditeur de code en ligne qui facilite la création et la publication de vos propres pages web tout en apprenant le langage HTML, CSS et le JavaScript

2017

CSS - @font-face - CSS font-display: The Future of Font Rendering on the Web — SitePoint

Before looking in detail at the various features offered by font-display, let’s briefly consider how you might use the feature in your CSS. First of all, font-display is not a CSS property but, as mentioned in the intro, it is a descriptor for the @font-face at-rule. This means that it must be used inside a @font-face rule, as showed in the following code: @font-face { font-family: 'Saira Condensed'; src: url(fonts/sairacondensed.woff2) format('woff2'); font-display: swap; } In this snippet I’m defining a swap value for the font Saira Condensed. The keywords for all the available values are: auto block swap fallback optional

CSS - DESIG ONLINE TOOL - Responsive web design tool, CMS, and hosting platform | Webflow

(via)
Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

DEV - Web developer guides | MDN

Web developer guides. These articles provide how-to information to help you make use of specific technologies and APIs.

SVG - ONLINE TOOL - 20 Useful SVG Tools for Better Graphics - Hongkiat

(via)
SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results. Here the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.

CSS - How to Resize Background Images with CSS3 — SitePoint

(via)
Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.

CSS - RESPONSIVE - MEDIA QUERIES - The math of CSS locks

A CSS lock is a Responsive Web Design technique that lets you transition smoothly between two values, depending on the current viewport size, rather than jump straight from one value to the other.

2015

CSS - FIR - Firefox CSS Hacks Collection | Jeff Clayton IT Director / Senior Software Engineer / Film & Photography

(via)
These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

jQuery - TUTO - Iframe - Créer un élément HTML dans le DOM avec jQuery

Le sélecteur jQuery est la plupart du temps utilisé pour sélectionner des éléments existant dans le DOM, via une règle CSS. Mais le sélecteur peut aussi créer de nouveaux éléments HTML de manière extrêmement simple ! Voici un petit exemple très simple qui créé un élément div , écrit "Salut !" à l'intérieur, puis enfin ajoute cet élément à la fin de la page web (en l'ajoutant à la fin body) :

2014

🛠 CSS XUL - Firefox Interface : Chrome element names and IDs - MozillaZine Knowledge Base

(via)
When editing userChrome.css, you must add CSS selectors based on the element names and IDs/classes of the XUL user interface. There is no comprehensive listing of every single possible selector to use when styling the user interface (just as it would be silly to create such a comprehensive list for a web page), but a few of the more common and interesting selectors are listed below. The best way to discover how to select an element in the user interface is to use the DOM Inspector.

CSS - EDITOR - plugin - With Emmet Turbo-Charge Your CSS - Tuts+ Web Design Article

Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further. Visit the download page and install Emmet for your editor of choice. When working with Emmet, type in the appropriate abbreviation and hit the action key. In Sublime Text this is the TAB key. The syntax of the file you are working on will determine which abbreviations to use

jQuery / Javascript : 390 ressources Javascript & jQuery

by 1 other
Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows,

STY - USRSTYLES - VLC web client mods - Themes and Skins for Localhost - userstyles.org

If you have VLC installed on the local machine, great! Use that to your avantage as you reconfigure the style. You'll still need to change the address so you can actually use this style with a remote machine, and you'll have to add other addresses if you are accessing more than one machine at any given time. Simply go to the web interface, copy the address and paste it in where it says "http://ip:port" or add the values in manually. If you don't know how to enable the web interface in VLC for remote control, you'll need to learn that first before this style has any relevance to you. Everything can be found online.

2013

CSS - FONT - ONLINE TOOL - FontDropper 1000 - Play with Web Fonts

Play with Web Fonts: This is the easiest way to test or design with web fonts from WebINK. Just open FontDropper 1000 on any web page and start dropping fonts. See your changes instantly. Adjust font size, color, spacing and more

JAVASCRIPT - jQuery - Lazy Load Plugin for jQuery

by 10 others (via)
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

CSS - Super useful tools for CSS coding | CatsWhoCode.com

by 3 others (via)
Lorsque vous développez un site Web ou une application Web, avoir les bons outils peut certainement vous aider à économiser beaucoup de temps. Dans cet article, j'ai compilé une liste d'outils utiles et super pour le codage CSS

2009

DOM Inspector (also known as DOMi) - developer tool - MDC

The DOM Inspector (also known as DOMi) is a developer tool used to inspect, browse, and edit the Document Object Model of documents - usually web pages or XUL windows. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

Présentation de l'OpenWebGroup - Openweb.eu.org

Ce site vous présentera les divers aspects du Web selon vos besoins. Les décideurs y trouveront les informations à même d’éclairer leurs choix, les programmeurs et les designers pourront apprendre ou renforcer leurs connaissances et les formateurs et journalistes puiseront dans les articles à loisir.

Jardin Zen css: La beauté de la conception CSS - Spip

by 22 others
Alors, de quoi s'agit–il? Il y a clairement un besoin pour les graphistes de prendre les CSS au sérieux. Le Jardin Zen vise à exciter, inspirer, et encourager la participation. Pour commencer, voyez quelques concepts choisis dans la liste. Cliquez sur n'importe lequel pour le charger sur cette page. Le code HTML demeure le même, et seule la feuille de style extérieure change. Oui, vraiment. Les CSS permettent un contrôle complet et total du style d'un document hypertexte. La seule manière de vraiment démontrer cela d'une manière qui excite les gens est de démontrer ce qui peut vraiment être, une fois que les rennes ont été placées dans les mains de ceux capables de créer la beauté basée sur la forme. Jusqu'à maintenant, les exemples de trouvailles et montages intéressants ont étés fournis par des programmeurs et des structuralistes. Les concepteurs ont encore à faire leurs preuves. Cela doit changer.

Quelques ressources en vrac sur la cr�ation de sites web - Cours - Jean Cartier's Blog

Lorsque l’on conçoit un site web, il est souvent utile d’avoir un ensemble de ressources sur le design, la conception, l’ergonomie, les couleurs, ... Voici donc une liste de liens qui pourra peut-être vous intéresser

2008

Mozile (Mozilla Inline Editor)___Editer directement dans le navigateur votre page en XHTML/CSS - Recherche Google

Mozile (Mozilla Inline Editor) est un éditeur de pages XHTML, directement depuis votre navigateur. Outils d'édition courants (copier-coller, mettre en gras, changer la casse, mise en page, etc.) et insertion de liens etc ...

2007

web developers extension__________addons.mozilla.

by 2 others
if you get the excellent "web developers extension" addons.mozilla.org/extensions/moreinfo.php?id=60 for firefox, it has a tool that lets you edit the style of a page on the fly. it also then lets you save it and apply that style sheet to the whole site.

2006

Web Developer Extension

by 19 others
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux