Bordure partielle et ombre

**Raging1** · 25/08/2023, 18h07

Bonjour je souhaite pouvoir réaliser les éléments qui sont marqués en rouge.J'ai essayer avec border et box shadow mais je n'obtient pas le résultat que je voudrai
Nom : 16928520962814_2023-08-24_064116.png
Affichages : 123
Taille : 235,2 Ko

Nom : 16928520962814_2023-08-24_064116.png
Affichages : 123
Taille : 235,2 Ko

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="carre-contenu">       
       <p>Photographe depuis plus de 5 ans, je réalise des reportages aux photos dynamiques et pertinentes
          pour vos projets de communication. Créativité, qualité, et sérénité pour vous ! Je gère tout,
          depuis la direction artistique,la réalisation du reportage, jusqu'à la livraison de vos photos retouchées,
          prêtes à l'emploi.
       </p>
       <h2>Services</h2>
       <ul>
          <li> Portrait seul ou à plusieurs    </li>
          <li> Shooting mode                   </li>
          <li> Retouches sur mesure            </li>            
          <li> Développement.                  </li>
       </ul>      
       </div>
       <div>
           <a href="Portfolio_2.html" class="cta">VOIR MON PORTFOLIO</a>
       </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.carre-contenu
{    
    border-right:1px solid #8e86b5;
    border-bottom: 1px solid #8e86b5;
    padding:50px;   
    width: 50%;
    margin: auto;       
}

**Archimède** · 25/08/2023, 19h08

Salut, ça te va cela ?

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.carre-contenu
{    
    border-right:1px solid #8e86b5;
    border-bottom: 1px solid #8e86b5;
    box-shadow: 30px 30px 12px #2C2E51;
    padding:50px;   
    width: 50%;
    margin: auto;       
}

**Raging1** · 26/08/2023, 11h30

archimède merci pour ta réponse mais non malheureusement ce n'est pas ça que je cherche
en fait comme sur la photo je veux qu'il y ai un carré mais qui ne prenne pas la largeur totale des photos
merci quand même

**Archimède** · 27/08/2023, 16h35

Re, je vois...
L'idée serait donc de mettre une div plus petite dans ton container image et de placer celle-ci en bas à droite en ajoutant l'effet d'ombrage. Comme ça, tu aurais la possIbilté de contrôler les dimensions de tes ombres.
Un essai :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
html,body{
    margin: 0;
    padding: 0;
    background-color: #E0DFC6;
}         
#image{    
    position: relative;
    margin: 5% auto 0; 
    background-image: url("https://images.pexels.com/photos/14706188/pexels-photo-14706188.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-size: cover;
    width: 50%;
    height:auto;
    border:2px solid #0E8DEC;    
    padding-bottom: 25%;
}
#bordure{
    position: absolute;
    bottom: 0;
    right: 0;
    border-right:1px solid #0E8DEC;
    border-bottom: 1px solid #0E8DEC;
    box-shadow: 30px 30px 15px #2C2E51;
    padding:15% 30%;  
}
</style>
</head>
<body> 
 <div id="image">     
   <div id="bordure"></div>
 </div>
</body>
</html>

En jouant sur le padding de la div intérieure: bordure, tu contrôles la dimension de tes ombres...

**NoSmoking** · 29/08/2023, 08h05

Bonjour et bienvenue sur DVP.
J'aurais tendance à dire que c'est un cas typique de l'utilisation d'un pseudo-élément, comme ::before.

Exemple :
sur base du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="image-conteneur bordure-conteneur">
  <img src="https://nosmoking.developpez.com/demos/css/images/image_001.jpg" alt="">
</div>
 
<div class="apropos-conteneur bordure-conteneur">
  <p>Photographe depuis plus de 5 ans, je réalise des reportages aux photos dynamiques et pertinentes
     pour vos projets de communication. Créativité, qualité, et sérénité pour vous ! Je gère tout,
     depuis la direction artistique,la réalisation du reportage, jusqu'à la livraison de vos photos retouchées,
     prêtes à l'emploi.
  </p>
  <h2>Services</h2>
  <ul>
    <li>Portrait seul ou à plusieurs</li>
    <li>Shooting mode</li>
    <li>Retouches sur mesure</li>
    <li>Développement.</li>
  </ul>
</div>

on pourrait obtenir ce que l'on voit sur ta capture en utilisant les CSS qui suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.image-conteneur {
  --debord-x: 3em;
  --debord-y: 2em;
  --debord-color: rgba(0,90,90,.5);
  width: 400px;
  margin: 0 auto 4em;
  border: 1px solid #690;
}
.apropos-conteneur {
  --debord-x: .5em;
  --debord-y: .5em;
  --debord-color: rgba(170,190,210,.5);
  padding:50px;
  width: 50%;
  margin: auto;
  border: 1px solid #069;
  background-color: #DEF;
}
.bordure-conteneur {
  position: relative;
}
.bordure-conteneur:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: var(--debord-y);
  right: calc(var(--debord-x) * -1);
  bottom: calc(var(--debord-y) * -1);
  left: 50%;
  background-color: var(--debord-color);
}

L'utilisation des variables CSS donne plus de « souplesse », on pourrait même mettre des valeurs par défaut sur :root.
C'est perfectible.

**Raging1** · 30/08/2023, 07h46

archimère merci pour ta réponse ça fonctionne mais faux que je l'améliore mais j'ai déjà une base pour comprendre .

nosmoking merci pour ta réponse.C'est EXACTEMENT ce que je recherche parfait .merci beaucoup .J'ai terminer une formation gratuite de dévellopement web html et css mais pas mal de balise que tu met me sont inconnu donc du coup j'étais perdu.
merci

**NoSmoking** · 31/08/2023, 16h05

... mais pas mal de balise que tu met me sont inconnu donc du coup j'étais perdu.

N'hésites pas, en cas de besoin les forums sont faits pour cela.

Bordure partielle et ombre

Ombre portée en CSS avec box-shadow

Discussions similaires

Partager

Partager