Afficher/masquer le menu
Liens Ecyseo
  • Tags cloud
  • Daily
  • Pictures wall
  • Search
  • Display options
    • Links per page :
    • 20 links
    • 50 links
    • 100 links
  • RSS Feed
  • Login

J'ai besoin d'intimité. Non pas parce que mes actions sont douteuses, mais parce que votre jugement et vos intentions le sont.

5165 links 

page 1 / 17

Liste des liens

324 results tagged css x
Styling Counters in CSS | CSS-Tricks
2025-03-18 17:50 - permalink -
counter css html
- https://css-tricks.com/styling-counters-in-css/
Mydevice.io, tout savoir sur votre device - Alsacreations
2025-01-25 23:24 - permalink -

Trop bien. À tester

css design outils pratique
- https://www.alsacreations.com/outils/lire/1528-mydevice-tout-savoir-sur-votre-device.html
Pricing Table | Tabla de Precios
2025-01-4 1:29 - permalink -

Idée de présentation des prix

css design idées
- https://codepen.io/Creaticode/pen/ZEwjPg
SwebDev - La fonction CSS clamp()
2024-12-5 11:42 - permalink -

La fonction clamp permet d'adapter la taille d'un texte sans media queries

astuce css
- https://www.swebdev.fr/blog/la-fonction-css-clamp
[CSS] Show and hide blocks with :target pseudo-classes – Codepen.io
2024-05-22 19:30 - permalink -

Une utilisation intéressante de la pseudo-classe :target.

:target cible l’élément de la page vers lequel pointe le hash dans une URL.

Avec :has() et :not(), on peut masquer tous les éléments, sauf le :target, seulement quand il y en a un.
Dans ce cas, ne pas oublier de mettre un bouton de virer le :target pour ré-afficher tous les éléments (bouton lui-même >affiché seulement s’il est utile !).

Pas mal, non ? Et ça tient en une seule ligne.

css
- https://lehollandaisvolant.net/?mode=links&id=20240512163834
slide-show
2024-05-14 23:51 - permalink -

Un slide-show horizontal et prêt pour le plein écran

css javascript slideshow
- https://stephen.band/slide-show/
5 extraits CSS que tout développeur front-end devrait connaître en 2024  |  Articles  |  web.dev
2024-01-13 0:17 - permalink -
astuce css tutoriels
- https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024?hl=fr
CSS Nesting | 12 Days of Web
2023-12-29 1:35 - permalink -

Une nouvelle façon d'écrire le css, en imbriquant les règles.
Cela permet de gagner en écriture et en compréhension du code.

css tutoriels
- https://12daysofweb.dev/2023/css-nesting/
Datalist, a native autosuggest
2023-12-15 1:1 - permalink -

Instead of installing $your-framework-autosuggest, try out datalist in your next project. Datalist is the browsers built-in way of showing a list of options as a user types into an input.

<input list="frameworks" />

<datalist id="frameworks">
  <option>Bootstrap</option>
  <option>Tailwind CSS</option>
  <option>Foundation</option>
  <option>Bulma</option>
  <option>Skeleton</option>
</datalist>

To use it, you add a datalist element with an ID and a set of options to your HTML. Don't worry, the element won't be visible. Then you use the list attribute on an input to associate the two.

As a user now types into the input, the browser will show the datalist as a dropdown, automatically filtering the options as the user types. Because it's a regular input though, users still have the option to type in their own value. Lastly, they can see all of the options by selecting the input and using the arrow keys to navigate the list, or clicking the dropdown icon the browser adds.

astuce css html liste
- https://www.htmhell.dev/adventcalendar/2023/2/
CSS : n'oubliez pas l'impression papier!
2023-11-18 12:41 - permalink -
css print tutoriels
- https://la-cascade.io/articles/css-noubliez-pas-limpression-papier
Maîtriser l'impression CSS | Openweb.eu.org
2023-11-18 12:39 - permalink -
css print tutoriels
- https://openweb.eu.org/articles/maitriser_impression_css
Des styles CSS pour optimiser l'impression papier - Créastuces
2023-11-18 12:38 - permalink -
css print tutoriels
- https://www.creastuces.com/des-styles-css-pour-optimiser-limpression-papier/
CSS - Menu on image hover - 30 seconds of code
2023-11-5 3:49 - permalink -
Home Pricing About

.hover-menu {
position: relative;
overflow: hidden;
margin: 8px;
min-width: 340px;
max-width: 480px;
max-height: 290px;
width: 100%;
background: #000;
text-align: center;
box-sizing: border-box;
}

.hover-menu * {
box-sizing: border-box;
}

.hover-menu img {
position: relative;
max-width: 100%;
top: 0;
right: 0;
opacity: 1;
transition: 0.3s ease-in-out;
}

.hover-menu div {
position: absolute;
top: 0;
left: -120px;
width: 120px;
height: 100%;
padding: 8px 4px;
background: #000;
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}

.hover-menu div a {
display: block;
line-height: 2;
color: #fff;
text-decoration: none;
opacity: 0.8;
padding: 5px 15px;
position: relative;
transition: 0.3s ease-in-out;
}

.hover-menu div a:hover {
text-decoration: underline;
}

.hover-menu:hover img {
opacity: 0.5;
right: -120px;
}

.hover-menu:hover div {
left: 0;
opacity: 1;
}

css menu
- https://www.30secondsofcode.org/css/s/image-hover-menu/
All media queries for iPhone 14 (Pro, Max, Plus, Mini) and older ones
2023-10-9 1:3 - permalink -

C'est trop bien les ifounes ! Rien que 8 media queries différents pour juste les cibler. Et si on ajoute l'orientation, on double la mise...
Je pense que le nombre de chauves dans la population des designers doit être élevé tellement ils doivent s'arracher les cheveux...


/*For iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14:*/
/* 1170×2532 pixels at 460ppi */
@media only screen
    and (width: 390px)
    and (height: 844px)
    and (-webkit-device-pixel-ratio: 3) {

}

/*For iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus:*/
/* 1284×2778 pixels at 458ppi */
@media only screen
    and (width: 428px)
    and (height: 926px)
    and (-webkit-device-pixel-ratio: 3) {

}

/*Unique to iPhone 14 Pro:*/
/* 1179×2556 pixels at 460ppi */
@media only screen
    and (width: 393px)
    and (height: 852px)
    and (-webkit-device-pixel-ratio: 3) { }

/*Unique to iPhone 14 Pro Max:*/
/* 1284×2778 pixels at 460ppi */
@media only screen
    and (width: 430px)
    and (height: 932px)
    and (-webkit-device-pixel-ratio: 3) {

}

/*For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini:*/
/* 1080×2340 pixels at 476ppi */
@media only screen
    and (width: 375px)
    and (height: 812px)
    and (-webkit-device-pixel-ratio: 3) { }

/*For iPhone XR, and iPhone 11:*/
/* 828×1792 pixels at 326ppi */
@media only screen
    and (width: 414px)
    and (height: 896px)
    and (-webkit-device-pixel-ratio: 2) { }

/*For iPhone Xs Max, and iPhone 11 Pro Max:*/
/* 1242×2688 pixels at 458ppi */
@media only screen
    and (width: 414px)
    and (height: 896px)
    and (-webkit-device-pixel-ratio: 3) { }

/*For iPhone 7 (2016), iPhone 8 (2017), and iPhone SE (1st to 3rd gen):*/
/* 750×1334 pixels at 326ppi */
@media only screen
    and (width: 375px)
    and (height: 667px)
    and (-webkit-device-pixel-ratio: 2) { }

Device orientation
Use the following code to add landscape or portrait orientation:
For portrait:

and (orientation: portrait)

For landscape:

and (orientation: landscape)
css iphone mais-kescesay-que-ce-bordel media-queries
- https://stackoverflow.com/questions/58087446/all-media-queries-for-iphone-14-pro-max-plus-mini-and-older-ones
[CSS] Rendre un tableau responsive | by Vanessa Asse | Medium
2023-04-11 18:12 - permalink -
    <table class=”events-table” >
    <caption>Évènements</caption>
    <thead>
    <tr>
    <th class=”event-date”>Date</th>
    <th class=”event-time”>Horaire</th>
    <th class=”event-description”>Evènement</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td data-label=”Date”> Le #_EVENTDATES</td>
    <td data-label=”Horaire”>#_EVENTTIMES</td>
    <td data-label=”Evènement”>#_EVENTLINK</td>
    </tr>
    </tbody>
    </table>

Je pense à ajouter un “data-label” à chacun de mes “td”.

Et voici le CSS :


table caption {
    display: none;
}

@media all and (max-width:500px){
    table{
        width:100%;
    }

    table caption {
        display: block;
        background-color: #484d55;
        color:white;
    }

    .table thead {
    display: none;
    }

    .table tr{
    display: block;
    margin-bottom: 40px;
    }

    .table td {
    display: block;
    text-align: right;
    }

    .table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    }
}
css html table
- https://medium.com/@vanessaasse/rendre-un-tableau-responsive-5ed9ab7bb3ed
Chameleonic Header in CSS and JavaScript | CodyHouse
2021-12-28 19:57 - permalink -
animation css design scroll tutoriels web
- https://codyhouse.co/tutorials/chameleonic-header-effect
GitHub - arcticicestudio/nord: An arctic, north-bluish color palette.
2021-12-13 15:13 - permalink -

Le github de Nord

css palettes pastel
- https://github.com/arcticicestudio/nord
Nord
2021-12-13 15:12 - permalink -

Palettes de couleurs pastelles.

couleurs css palettes pastel
- https://www.nordtheme.com/
GitHub - jstrieb/urlpages: Create and view web pages stored entirely in the URL
2021-12-1 16:19 - permalink -

Encoder une page dans l'url en base64, à la manière de zerobin.

css html javascript outils
- https://github.com/jstrieb/urlpages
MVP.css - Minimalist stylesheet for HTML elements
2021-11-18 13:57 - permalink -

Framework css minimaliste. J'aime bien.

css framework
- https://andybrewer.github.io/mvp/#docs
page 1 / 17


Tags


  • shaarli
  • wikipedia

Tags cloud

Shaarli - The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community - Help/documentation
Affiches "loi aviva" créées par Geoffrey Dorne le 13 Mai, 2020 - Mastodon 1 - Mastodon 2