Plugins variés

CODES Html, Css, JS

Utilisation du symbole magique .$

Horaire, agenda, Horloge...

Le symbole magique .$ permet d’appliquer du code CSS sur un composant de WA-Fusion.
! On peut appliquer plusiers codes CSS au même bouton
Exemple: ombre + zoom + movement, etc

Faites un Copier-Coller des codes CSS dans vos projets

Adapter à votre besoin : taillle (px), couleurs (#320126) , scale (1;1)...

< Cliquez sur l'image pour l'agrandir

Tutoriel vidéo

play

Plugins Variés Page 02

07 - Tabulation Responsive

Nom	Nationalité	Date création
Chevrolet	États-Unis	1911
Citroën	France	1919
Ford	États-Unis	1911
Renault	France	1919

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                
                                                <table>
                                                <thead>
                                                <tr>
                                                <th>Nom</th>
                                                <th>Nationalité</th>
                                                <th>Date création</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                <td data-title="Nom">Chevrolet</td>
                                                <td data-title="Nationalité">États-Unis</td>
                                                <td data-title="Date création">1911</td>
                                                </tr>
                                                <tr>
                                                <td data-title="Nom">Citroën</td>
                                                <td data-title="Nationalité">France</td>
                                                <td data-title="Date création">1919</td>
                                                </tr>
                                                <tr>
                                                <td data-title="Nom">Ford</td>
                                                <td data-title="Nationalité">États-Unis</td>
                                                <td data-title="Date création">1911</td>
                                                </tr>
                                                <tr>
                                                <td data-title="Nom">Renault</td>
                                                <td data-title="Nationalité">France</td>
                                                <td data-title="Date création">1919</td>
                                                </tr>
                                                </tbody>

CODE CSS

coller ce code dans : Popriétes de page > Code HTML personalisé > Html du bloc Head de la page

                                                
                                                
                                                table{
                                                	
                                                margin: 1rem auto;
                                                text-align: center;
                                                width: 100%;
                                                max-width: 100%;
                                                border-collapse: collapse;
                                                border: 1px solid
                                                
                                                }
                                                		
                                                	
                                                thead{
                                                
                                                background-color: purple;
                                                color: white
                                                
                                                }
                                                	
                                                
                                                th,td{padding:8px 0}
                                                
                                                tbody tr:nth-child(even) {
                                                	
                                                background-color: #ddd
                                                	
                                                }
                                                	
                                                @media only screen and (max-width: 800px) {
                                                		
                                                table, 
                                                thead, 
                                                tbody, 
                                                th, 
                                                td, 
                                                tr{ 
                                                	
                                                display: block
                                                	
                                                }
                                                	
                                                thead tr { 
                                                position: absolute;
                                                top: -9999px;
                                                left: -9999px;
                                                }
                                                 
                                                 
                                                 
                                                td { 
                                                	
                                                position: relative;
                                                padding-left: 50%; 
                                                white-space: normal;
                                                text-align: left
                                                	
                                                	}
                                                 
                                                td:before { 
                                                	
                                                position: absolute;
                                                top: 6px;
                                                left: 6px;
                                                width: 45%; 
                                                padding-right: 10px; 
                                                font-weight: bold;
                                                white-space: nowrap;
                                                text-align:left;
                                                content: attr(data-title)
                                                	
                                                	}
                                                }

08 - Animation texte SVG

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                            <svg width="100%" height="200" viewBox="0 0 960 200">
                                                                            <defs>
                                                                            <linearGradient id="demo" x1="100%" x2="0" y1="0" y2="0" gradientUnits="userSpaceOnUse">
                                                                            <stop stop-color="#e03f7c" offset="0%"/>
                                                                            <stop stop-color="#51F7FE" offset="100%"/> 
                                                                            </linearGradient>
                                                                            </defs>
                                                                            <text stroke="url(#demo)" x="5%" y="70%" font-size="120"><tspan>VOTRE TEXTE</tspan></text>
                                                                            </svg>

CODE CSS

coller ce code dans : Popriétes de page > Code HTML personalisé > Html du bloc Head de la page

                                                                            
                                                                            
                                                                            text {
                                                                            fill:transparent;
                                                                            stroke-width:3;
                                                                            stroke-dasharray:495;
                                                                            stroke-dashoffset:495;
                                                                            animation:anim_demo 5s infinite alternate linear}
                                                                            
                                                                            @keyframes anim_demo{from{stroke-dashoffset:495}to{stroke-dashoffset:0}}

Soutenez mon travail.

Si vous appréciez mon travail, que vous voulez l'encourager, vous pouvez faire un don ici.
Tout don, aussi petit soit-il, peut faire la différence !

Merci pour votre soutien !

FAIRE UN DON

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr