Page 65 sur 81

Re: [S'inspirer] Postez votre Plan / Design

Publié : 10 juil. 2018, 15:14
par kevvv31
Djal94 a écrit :
kevvv31 a écrit :
08 juil. 2018, 15:54
Salut à tous,

Cela fait maintenant plusieurs années que Jeedom est entré dans ma maison.
Ci-dessous quelques uns des Designs que j'utilise régulièrement (en espagnol car je vis en Espagne ;) )
J'ai également créé d'autres designs similaires adapté à Tablette / Smartphone. Ceux-ci sont fait pour PC.


Jeedom PC Home2.JPG



Jeedom PC Energy.JPG



Jeedom PC LightsJPG.JPG


En espérant vous avoir inspiré :D

Ciao!

Kev
Hello, tu peux partager ton widget de puissance stp?
Salut,

Il est dans le Market sous le nom power_gauge2_winhex


Enviado desde mi iPhone utilizando Tapatalk

Re: [S'inspirer] Postez votre Plan / Design

Publié : 10 juil. 2018, 15:19
par Djal94
Ok nice je l'avais pas trouvé merci

Re: [S'inspirer] Postez votre Plan / Design

Publié : 10 juil. 2018, 15:48
par Djal94
Fonctionne pas chez moi, j'ai pas les couleurs ...

Re: [S'inspirer] Postez votre Plan / Design

Publié : 10 juil. 2018, 17:03
par yoMalu
Sartog a écrit :
20 avr. 2018, 09:31
Alors pour ce widget météo voici ce que j'ai fais (informations récupérées du plugin Weather)
Je ne le mets pas dans le market car son alimentation est particulière.
  1. Création du virtuel :
    Capture.JPG
    Il faut créer une commande info (type "autre") que nous alimenterons avec toutes les commandes nécessaire au widget. Il est impératif que les commandes soient toute sur la même ligne (sans saut de ligne).
    Pour plus de clarté voici les commandes à intégrer :

    Code : Tout sélectionner

    #[Courbeovie][(Météo) Courbevoie][Condition]#
    #[Courbeovie][(Météo) Courbevoie][Température]#
    #[Courbeovie][(Météo) Courbevoie][Numéro condition]#
    #[Courbeovie][(Météo) Courbevoie][Numéro condition +1]#
    #[Courbeovie][(Météo) Courbevoie][Numéro condition +2]#
    #[Courbeovie][(Météo) Courbevoie][Numéro condition +3]#
    #[Courbeovie][(Météo) Courbevoie][Température Min]#
    #[Courbeovie][(Météo) Courbevoie][Température Min +1]#
    #[Courbeovie][(Météo) Courbevoie][Température Min +2]#
    #[Courbeovie][(Météo) Courbevoie][Température Min +3]#
    #[Courbeovie][(Météo) Courbevoie][Température Max]#
    #[Courbeovie][(Météo) Courbevoie][Température Max +1]#
    #[Courbeovie][(Météo) Courbevoie][Température Max +2]#
    #[Courbeovie][(Météo) Courbevoie][Température Max +3]#
    Courbevoie,Fr
  2. Création du widget :
    Capture1.JPG
    Il faut créer un nouveau widget avec les paramètres ci-dessous.
    • Création du fichier css :
      Il faut créer un fichier css avec le code ci-après que vous importerez dans votre widget (bouton Fichier).
      Mon fichier s'appel meteo.css. Si vous mettez un autre nom, pensez à corriger le code du widget plus bas.

      Code : Tout sélectionner

      @import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css');
      
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      
      .ww-wrapper {
        width: 220px;
        height: 100%;
        margin: 0 auto;
      
        background-color: rgba(0,0,0,0.25);
      }
      
      .ww-row {
        display: flex;
        justify-content: space-around;
      }
      
      .weatherCard {
        flex: 0 1 220px;
      
        height: 290px;
      
        box-shadow: 0px 2px 11px 1px rgba(0,0,0,0.15);
        line-height: 1.5;
      }
      
      .cityContainer {
        width: 100%;
        height: 150px;
        padding: 12px 15px;
      }
      
      .cityName {
        position: relative;
      
        font-size: 18px;
        text-align: right;
      }
      
      .iconTempWrapper {
          display: block;
      
          margin-bottom: 4px;
      
          text-align: right;
          justify-content: space-between;
      }
      
      .weatherIcon {
          position: absolute;
      
          top: 30px;
          padding: 0;
      
          font-size: 60px;
      }
      
      .weatherTemp {
          position: relative;
      
          opacity: 1;
      
          font-weight: normal;
          font-size: 45px;
      
          transition: 0.2s ease-out;
      }
      
      .weatherTempMinMax{
          margin-top:-10px !important;
          margin-bottom: 5px !important;
      
          font-size:15px;
          font-weight: normal;
      }
      
      .tempAndCity {
        text-align: right;
      }
      
      .tempAndCity p {
        padding: 0;
        margin: 0;
      }
      
      .weatherDesc {
        padding-top: 3px;
      
        font-size: 14px;
        text-transform: capitalize;
        text-align: right;
      }
      
      .weatherForecast {
        height: 140px;
        width: 100%;
      
        background-color: rgba(255,255,255,1);
      
        text-align: center;
      }
      
      .weatherForecast .forecastCard {
          position: relative;
          display: inline-block;
      
          width: 52px;
          margin: 2px;
          padding: 5px 8px;
      
          color: #444;
      }
      
      .forecastCard p {
          margin: 0;
          padding: 0;
      
          font-size: 18px;
          line-height: 1.5;
      }
      .forecastCard .forecastIcons {
        font-size: 25px;
      }
      
      .forecastCard .forecastMin {
          color: #b3b3b3;
      }
      
      .sunny-class {
        background: rgba(255,232,161,1);
        background: radial-gradient(ellipse at center, rgba(255,232,161,1) 0%, rgba(245,202,101,1) 100%);
        color: #997300;
      }
      
      .night-class {
        background: rgba(250,250,250,1);
        background: radial-gradient(ellipse at center, rgba(150,150,150,1) 0%, rgba(100,100,100,1) 100%);
        color: #dddddd;
      }
      
      .cloudy-class {
        background: rgba(250,250,250,1);
        background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(185, 192, 193, 1) 100%);
        color: #6d7f87;
      }
      
      .rainy-class {
        background: rgba(213,240,250,1);
        background: radial-gradient(ellipse at center, rgba(213,240,250,1) 0%, rgba(150,209,230,1) 100%);
        color: #006b99;
      }
      
      .stormy-class {
        background: #ABB6BB;
        background: radial-gradient(ellipse at center, rgb(199, 222, 230) 0%, rgb(155, 170, 175) 100%);
        color: #37474F;
      }
      
      .snow-class {
        background: rgba(153, 181, 191, 1);
        background: radial-gradient(ellipse at center, rgb(199, 212, 230) 0%, rgb(139, 164, 173) 100%);
        color: #395c6b;
      }
      
    • Code du widget :
      Le code se compose de l'appel au fichier css, le bloc html et du bloc JS qui se charge de récupérer les info du virtuel et les mettre en forme.

      Code : Tout sélectionner

      <!-- basé sur le travail de Josh Reynolds
      https://codepen.io/jreynolds90/pen/VmmdyR -->
      
      <link rel="stylesheet" type="text/css" href="plugins/widget/core/template/dashboard/cmd.info.string.(Design) Meteo Weather/meteo.css">
      
      <div style="" class="cmd cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
        <div class="ww-wrapper">
          <div class="ww-row">
      
            <div class="weatherCard">
              <div class="cityContainer cityCard">
                <div class="weatherDesc"></div>
                <div class="iconTempWrapper">
                  <div class="weatherIcon"></div>
                  <div class="tempAndCity">
                    <p class="weatherTemp"></p>
                    <p class="weatherTempMinMax"></p>
                    <p class="cityName"></p>
                  </div>
                </div>
              </div>
      
              <div class="weatherForecast">
                <div class="forecastCard forecastJ1">
                  <p class="forcastDay"></p>
                  <p class="forecastIcons"></p>
                  <p class="forecastMax"></p>
                  <p class="forecastMin"></p>
                </div>
                <div class="forecastCard forecastJ2">
                  <p class="forcastDay"></p>
                  <p class="forecastIcons"></p>
                  <p class="forecastMax"></p>
                  <p class="forecastMin"></p>
                </div>
                <div class="forecastCard forecastJ3">
                  <p class="forcastDay"></p>
                  <p class="forecastIcons"></p>
                  <p class="forecastMax"></p>
                  <p class="forecastMin"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      
        <script>
      
          function getWeatherIcon_20180323(conditionCode) {
      
            let category = Number(String(conditionCode).charAt(0));
            const conditionDescriptions = {2: ['wi-storm-showers', '#5C6D75'],
                                           3: ['wi-rain-mix', '#51d2fc'],
                                           5: ['wi-rain', '#2cc4f5'],
                                           6: ['wi-snow', '#B2EBF2'],
                                           7: ['wi-fog', '#90A4AE'],
                                           800: ['wi-day-sunny', '#ffc000'],
                                           8: ['wi-day-cloudy', '#a3bcc7'],
                                           9: ['wi-cloudy-gusts', '#A2B4BA']};
      
            //add inline styles for icon elements to ensure the correct icon colour is placed through loops
            if (conditionCode === 520 || conditionCode === 521 ||conditionCode === 522 ){
              let iconHTML = `<i class="wi wi-showers" style="color: '${conditionDescriptions[category][1]}"></i>`;
              return iconHTML;
            } else if (conditionCode === 800) {
              let iconString = conditionDescriptions[800][0];
              let iconHTML = `<i class="wi ${iconString}" style="color: ${conditionDescriptions[800][1]}"></i>`;
              return iconHTML;
            } else {
              let iconString = conditionDescriptions[category][0];
              let iconHTML = `<i class="wi ${iconString}" style="color: ${conditionDescriptions[category][1]}"></i>`;
              return iconHTML;
            }
          }
      
          // Set Background colours with classes varying on the condition.
          function changeCardBg_20180323(conditionCode) {
      
            let category = Number(String(conditionCode).charAt(0));
      
            if (conditionCode === 800) {
              $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('sunny-class');
            } else if (category === 2) {
              $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('stormy-class');
            } else if (category === 3 || category === 5) {
              $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('rainy-class');
            } else if (category === 6) {
              $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('snow-class');
            } else if (category === 7 || category === 8 || category === 9) {
              $('.cmd[data-cmd_uid=#uid#] .cityCard').addClass('cloudy-class');
            }
          }
      
          function returnNextDays_20180323(n) {
      
            const dayNames = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
            const today = (new Date()).getDay();
            let nextDays = [];
      
            for (let i = 0; i < n; i++) {
              nextDays.push(dayNames[(today + 1 + i) % dayNames.length]);
            }
      
            return nextDays;
          }
      
        	jeedom.cmd.update['#id#'] = function(_options){
            var state = _options.display_value;
            var stateListe = state.split(",");
            var cityName = stateListe[14];
      	  var country = stateListe[15];
            var conditionJ0 = stateListe[0].replace("\"","");
            var tempJ0 = parseFloat(stateListe[1]);
            var numCondition = [parseFloat(stateListe[2]), parseFloat(stateListe[3]), parseFloat(stateListe[4]), parseFloat(stateListe[5])];
            var tempMini = [parseFloat(stateListe[6]), parseFloat(stateListe[7]), parseFloat(stateListe[8]), parseFloat(stateListe[9])];
            var tempMaxi =[parseFloat(stateListe[10]), parseFloat(stateListe[11]), parseFloat(stateListe[12]), parseFloat(stateListe[13])];
      
            // Build HTML elements and insert data
            $('.cmd[data-cmd_uid=#uid#] .weatherDesc').empty().append(conditionJ0);
            $('.cmd[data-cmd_uid=#uid#] .weatherIcon').empty().append(getWeatherIcon_20180323(numCondition[0]));
            $('.cmd[data-cmd_uid=#uid#] .weatherTemp').empty().append(tempJ0.toFixed(0) + '°C');
            $('.cmd[data-cmd_uid=#uid#] .weatherTempMinMax').empty().append(tempMini[0].toFixed(0) + '° / ' + tempMaxi[0].toFixed(0) + '°');
            $('.cmd[data-cmd_uid=#uid#] .cityName').empty().append(cityName + ', ' + country);
      
            // Call method to change the WeatherCard background by passing it's condition code
            changeCardBg_20180323(numCondition[0]);
      
            // Grab the next 3 days and loop through each with the days top temperature.
            // generate forecast sections and loop through the data for each day
            let nextDays = returnNextDays_20180323(3);
            $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forcastDay').empty().append(nextDays[0]);
            $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[1]));
            $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastMax').empty().append(tempMaxi[1].toFixed(0) + '°');
            $('.cmd[data-cmd_uid=#uid#] .forecastJ1 .forecastMin').empty().append(tempMini[1].toFixed(0) + '°');
      
            $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forcastDay').empty().append(nextDays[1]);
            $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[2]));
            $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastMax').empty().append(tempMaxi[2].toFixed(0) + '°');
            $('.cmd[data-cmd_uid=#uid#] .forecastJ2 .forecastMin').empty().append(tempMini[2].toFixed(0) + '°');
      
            $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forcastDay').empty().append(nextDays[2]);
            $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastIcons').empty().append(getWeatherIcon_20180323(numCondition[3]));
            $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastMax').empty().append(tempMaxi[3].toFixed(0) + '°');
            $('.cmd[data-cmd_uid=#uid#] .forecastJ3 .forecastMin').empty().append(tempMini[3].toFixed(0) + '°');
          }
      
          jeedom.cmd.update['#id#']({display_value:'#state#'});
      
        </script>
      </div>
      
J'espère que ce sera suffisamment clair pour vous permettre d’appréhender ce widget afin de le mettre en place facilement.
Il doit être transposable aux autres plugins météo moyennement une adaptation du code (il me semble que le plugin Darksky ne retourne pas de n° de condition mais du texte).

J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/

Re: [S'inspirer] Postez votre Plan / Design

Publié : 10 juil. 2018, 22:18
par Sartog
yoMalu a écrit :
10 juil. 2018, 17:03
J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/
Bonsoir yoMalu,

Dans le design, pour ajouter ton virtuel il te faut faire clique droit -> ajouter un équipement.

Re: [S'inspirer] Postez votre Plan / Design

Publié : 10 juil. 2018, 23:42
par yoMalu
Sartog a écrit :
10 juil. 2018, 22:18
yoMalu a écrit :
10 juil. 2018, 17:03
J'ai fait tout ce que tu as dis au dessus, mais sur le design ou l'importe sous quel forme ? :/
Bonsoir yoMalu,

Dans le design, pour ajouter ton virtuel il te faut faire clique droit -> ajouter un équipement.

Ah donc dans le design, c'est bien le virtuel qu'on importe, faut pas chercher le plugin ! :)
Malheureusement, ça me pop ça :(
http://prntscr.com/k4xfdr

Voila le virtuel https://prnt.sc/k4xhjl
et le widget https://prnt.sc/k4xhwl

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 12:56
par raphael_malin
Hello,
J'ai besoin d'aide concernant du codage CSS.
J'ai récupéré du code pour effectuer des cases pour le design mais lorsque je change la couleur toutes les cases changent.
Au début le code était directement dans le texte/html, j'ai donc créé un fichier CSS et maintenant via un lien, je récupère le fichier.
J'ai donc créé un second fichier CSS avec des couleurs différentes, mais lorsque je l'ai ajouté dans le design, toutes les cases ont à nouveau changé :(

Comment faire pour les dissocier?
et comment puis je sortir certaines lignes de façon à les mettre dans le code html pour ne modifier qu'elles ? (comme le texte par ex qui est déjà comme ca)

Merci
Voici le css:

Code : Tout sélectionner

<style>
.boxT {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background: #EEE;
  background-color: rgba(0,0,50,0.6);
}
.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%); /*Couleur ruban*/
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
</style>
et le html:

Code : Tout sélectionner

<link href="PERSO/fenetre+ruban perso/fenetre+ruban.css" rel="stylesheet" type="text/css">

<div class="boxT">
   <div class="ribbon"><span>SAINTS</span></div>
</div>

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 12:59
par Djal94
Ça se produit en fonction du navigateur quand tu appelles des propriétés ayant le même nom dans 2 fichiers .css distincts.
Changes le nom des propriétés dans le 2ème fichier et ça devrait aller

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 13:53
par raphael_malin
qu'appelles tu propriétés? merci

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 13:57
par Djal94
Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 13:59
par Djal94
Djal94 a écrit :
18 juil. 2018, 13:57
Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)
Ceci est du il me semble au fonctionnement du cache du navigateur (la mise en forme .css est stocké en cache).

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 16:15
par amistad132
Salut les amis,

Voici mon nouveau design, afficher sur écran 22 pouces en mode vertical.
J'ai encore quelques bricoles à ajouter/ajuster

Image

Re: [S'inspirer] Postez votre Plan / Design

Publié : 18 juil. 2018, 20:32
par Jeeviens
Nouveau design pour ma tablette et moi, à la demande de la chef des waf : )

La chef veut des boutons On/Off... alors bon...

Premier jet, écran principal : ) (Je peaufine les autres...)

Image à 80% comme d'hab : )

SShot_1.png
SShot_1.png (543.02 Kio) Consulté 1022 fois

A Partir de la, c'est juste en cours...

SShot_2.png
SShot_2.png (398.2 Kio) Consulté 1019 fois
SShot_3.png
SShot_3.png (468.26 Kio) Consulté 1019 fois

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 00:07
par pinouche
Boboss a écrit :
09 juil. 2018, 15:16
Hello
Bravo à tous pour vos désign
pinouche a écrit :
29 juin 2018, 17:54

Image




Juste une question : comment faites vous pour avoir des onglets comme sur la page.

J'ai cherché sur le net. Il faut mettre du code Css mais où faut-il le placer ?

Merci de votre aide.

bonjour,
désolé pour la réponse tardive. En fait j'ai simplement créer des bloc textes/html que j'ai placé sur le design et j'ai placé les mêmes bloc sur les autres pages. j'ai vraiment fait au plus simple et sans code.

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 07:22
par amistad132
Jeeviens a écrit :
18 juil. 2018, 20:32
Nouveau design pour ma tablette et moi, à la demande de la chef des waf : )

La chef veut des boutons On/Off... alors bon...

Premier jet, écran principal : ) (Je peaufine les autres...)

Image à 80% comme d'hab : )
Ou as tu eu les "voyants" retours d’états rouge et vert ? j'arrive pas a mettre la main sur ce style de widgets

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 07:42
par Jeeviens
@amistad132 : salut ! Ce sont tous des créations perso

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 08:55
par amistad132
Jeeviens a écrit :
19 juil. 2018, 07:42
@amistad132 : salut ! Ce sont tous des créations perso
Eh bien bravo !! Ca a de la gueule, tu as fais avec quel logiciel ?

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 09:32
par Jeeviens
Google Images et un vieux Photoshop 7 :D

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 13:47
par raphael_malin
Djal94 a écrit :
18 juil. 2018, 13:57
Ce que je veux dire , c'est que :

- Si dans une même page HTML (ton design Jeedom), tu as deux box HTML (qui font référence à 2 fichiers .css différents) mais que tu appelle une propriété de même nom, (ex : .boxT ou .ribbon) alors le navigateur se mélange les pinceaux.

Piur éviter ca, change le nom de tes propriétés dans le .css et modifie le html en conséquence (ex : .boxT2 et .ribbon2)
Super merci pour ton explication,
J'ai galéré sur le début, car il semble qu'il faut mettre un petit quelques chose au début pour que le 1er boxT fonctionne.
Du coup j'ai mis rien. sinon le boxT0 n'est pas pris en compte.

Code : Tout sélectionner

<style>
.rien {}
.boxT_0 { /*bleu foncé*/
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,0,50,0.6);
}
.boxT_1 {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,0,150,0.6);
}
.boxT_2 {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background-color: rgba(0,100,250,0.6);
}
.ribbon_0 {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_0 span { /*bleu*/
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_0 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon_0 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon_1 { /*Violet*/
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_1 span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#ED01FE 0%, #B501C1 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_1 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #B501C1;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #B501C1;
}
.ribbon_1 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #B501C1;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #B501C1;
}
.ribbon_2 {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_2 span { /*Rouge*/
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#B9121B 0%, #C1010D 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon_2 span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #C1010D;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C1010D;
}
.ribbon_2 span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #C1010D;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C1010D;
}
</style>

Re: [S'inspirer] Postez votre Plan / Design

Publié : 19 juil. 2018, 13:49
par Djal94
Je n'ai pas eu besoin de faire ca , mais pourquoi pas. Et du coup ca fonctionne?