CSS Chip ve Badge Yapımı


    <!--CSS-->
    <style>

    .circle-badge{
        width: 3rem;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        display: grid;
        place-items: center;

        background-color: #0984e3;
        color:white;
    }

    </style>

    <!--HTML-->
    <span class="circle-badge">100</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<style>

.circle-badge{

width: 3rem;

aspect-ratio: 1 / 1;

border-radius: 50%;

display: grid;

place-items: center;

background-color: #0984e3;

color:white;

}

</style>


    <!--CSS-->
    <style>

    .hexagon-badge{
        width: 3rem;
        height: 3rem;;
        aspect-ratio: 1 / 1;
       
        display: grid;
        place-items: center;

        background-color: #00b894;
        color:white;

        clip-path: polygon(
            0 25%,
            0 75%,
            50% 100%,
            100% 75%,
            100% 25%,
            50% 0%
        );
    }

    </style>

    <!--HTML-->
    <span class="hexagon-badge">19</span>

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

<style>

.hexagon-badge{

width: 3rem;

height: 3rem;;

aspect-ratio: 1 / 1;

display: grid;

place-items: center;

background-color: #00b894;

color:white;

clip-path: polygon(

0 25%,

0 75%,

50% 100%,

100% 75%,

100% 25%,

50% 0%

);

}

</style>


    <!--CSS-->
    <style>

    .pill{
        border:1px solid #9da6aa;
        border-radius: 10rem;
        background-color: #b2bec3;
        padding-inline: 1.25rem;
        margin:1px;
        
        display: inline-flex;
        align-items: center;

        
    }

    .pill:hover{
        transition: background-color 200ms;
        background-color: #dfe6e9;
    }

    </style>

    <!--HTML-->
    <span class="pill">CSS</span>
    <span class="pill">HTML</span>
    <span class="pill">JS</span>
    <span class="pill">Bootstrap</span>

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

<style>

.pill{

border:1px solid #9da6aa;

border-radius: 10rem;

background-color: #b2bec3;

padding-inline: 1.25rem;

margin:1px;

display: inline-flex;

align-items: center;

}

.pill:hover{

transition: background-color 200ms;

background-color: #dfe6e9;

}

</style>

<span class="pill">Bootstrap</span>


    <!--CSS-->
    <style>
    .pill-container{
        display: flex;
        gap:.2rem;
        flex-wrap: wrap;
    }

    .pill-bordered{
        border:2px solid #e84393;
        color:#6c5ce7;
        border-radius: 10rem;
        
        display: flex;
        align-items: center;
        padding-inline: 1rem;

        position: relative;
        
    }
    .pill-bordered::before{
        content: "";
        width: .5rem;
        height: .5rem;
        background-color:#e84393;
        transform: rotate(45deg);
        transform-origin: center center;
        transition: all 500ms;
        
        position:absolute;
        left:5px;
        
    }
    .pill-bordered:hover::before{
        transform: rotate(0deg);
        transition: all 500ms;
        transform-origin: center center;
    }

    </style>

    <!--HTML-->
    <div class="pill-container">
        <span class="pill-bordered">CSS</span>
        <span class="pill-bordered">HTML</span>
        <span class="pill-bordered">JS</span>
        <span class="pill-bordered">Bootstrap</span>
        <span class="pill-bordered">PHP</span>
        <span class="pill-bordered">ASP.NET</span>

    </div>

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

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<style>

.pill-container{

display: flex;

gap:.2rem;

flex-wrap: wrap;

}

.pill-bordered{

border:2px solid #e84393;

color:#6c5ce7;

border-radius: 10rem;

display: flex;

align-items: center;

padding-inline: 1rem;

position: relative;

}

.pill-bordered::before{

content: "";

width: .5rem;

height: .5rem;

background-color:#e84393;

transform: rotate(45deg);

transform-origin: center center;

transition: all 500ms;

position:absolute;

left:5px;

}

.pill-bordered:hover::before{

transform: rotate(0deg);

transition: all 500ms;

transform-origin: center center;

}

</style>

<span class="pill-bordered">Bootstrap</span>

</div>


    <!--CSS-->
    <style>
    .container-pill{
        display: flex;
        gap:.25rem;
        flex-wrap: wrap;
    }

    .contant-pill{
        height: 3rem;
        border-radius: 10rem;

        background-color: #fdcb6e;

        display: flex;
        align-items: center;

        gap:.5rem;
        padding-inline-end: 1.5rem;
    }

    .contant-pill img{
        height: 100%;
        border-radius: 50%;
        object-fit: contain;
    }

    </style>

    <!--HTML-->
    <div class="container-pill">
        <span class="contant-pill">
            <img src="resim2.jpg" alt="">Ayla ÖZEN
        </span>
        <span class="contant-pill">
            <img src="resim1.jpg" alt="">Papatya SOLMAN
        </span>
    </div>

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

40

<style>

.container-pill{

display: flex;

gap:.25rem;

flex-wrap: wrap;

}

.contant-pill{

height: 3rem;

border-radius: 10rem;

background-color: #fdcb6e;

display: flex;

align-items: center;

gap:.5rem;

padding-inline-end: 1.5rem;

}

.contant-pill img{

height: 100%;

border-radius: 50%;

object-fit: contain;

}

</style>

<img src="resim2.jpg" alt="">Ayla ÖZEN

</span>

<img src="resim1.jpg" alt="">Papatya SOLMAN

</span>

</div>


<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tasarım Kodlama</title>
</head>

<body>

    <style>
        * {
            box-sizing: border-box;
            margin: 0;
        }

        html {
            background: #DBE5EA;
            height: 100%;
        }

        body {
            align-items: center;
            display: flex;
            font: 1.125em/1.5625 Source Sans Pro, Tahoma, Helvetica Neue, Helvetica, Arial, sans-serif;
            justify-content: center;
            margin: 0;
            padding: 1em;
            min-height: 100%;
        }

        /***********************/

        .Button {
            background: transparent;
            border: 0;
            border-radius: 0;
            color: inherit;
            display: inline-block;
            font: inherit;
            height: auto;
            line-height: 1;
            margin: 0;
            padding: 0;
            position: relative;
            text-align: center;
            text-decoration: none;
            user-select: none;
        }


        .Button:focus {
            outline: none;
        }

        .Button::-moz-focus-inner {
            border: 0;
        }

        .Button-inner {
            align-items: center;
            background: #456BD9;
            border: 2px solid transparent;
            border-radius: 99em;
            color: #fff;
            display: flex;
            font-weight: 600;
            height: 2.5em;
            min-width: 2.5em;
            padding: 0 1em;
            position: relative;
            transition: 0.2s ease;
            width: 100%;
        }

        .Button:focus .Button-inner {
            border-color: #fff;
            box-shadow: 0 0 0 2px #456BD9;
        }

        .Button:hover .Button-inner {
            filter: brightness(1.1);
        }

        .Button:active .Button-inner {
            filter: brightness(0.9);
        }




        .Badge {
            align-items: center;
            background: #ce2c6c;
            border: 2px solid #fff;
            border-radius: 99em;
            color: #fff;
            display: flex;
            font-size: 0.77em;
            font-weight: 400;
            height: 1.44em;
            justify-content: center;
            line-height: 1;
            min-width: 1.44em;
            position: absolute;
            right: -2px;
            top: -2px;
        }


        .u-hiddenVisually {
            border: 0 !important;
            clip: rect(1px, 1px, 1px, 1px) !important;
            height: 1px !important;
            overflow: hidden !important;
            padding: 0 !important;
            position: absolute !important;
            width: 1px !important;
        }
    </style>


    <button class="Button">
        <span class="Button-inner">
            Mail Kutusu
        </span>
        <span class="Badge">
            4 <span class="u-hiddenVisually">Unread Messages</span>
        </span>
    </button>

</body>

</html>

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

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

</head>

<body>

<style>

* {

box-sizing: border-box;

margin: 0;

}

html {

background: #DBE5EA;

height: 100%;

}

body {

align-items: center;

display: flex;

font: 1.125em/1.5625 Source Sans Pro, Tahoma, Helvetica Neue, Helvetica, Arial, sans-serif;

justify-content: center;

margin: 0;

padding: 1em;

min-height: 100%;

}

/***********************/

.Button {

background: transparent;

border: 0;

border-radius: 0;

color: inherit;

display: inline-block;

font: inherit;

height: auto;

line-height: 1;

margin: 0;

padding: 0;

position: relative;

text-align: center;

text-decoration: none;

user-select: none;

}

.Button:focus {

outline: none;

}

.Button::-moz-focus-inner {

border: 0;

}

.Button-inner {

align-items: center;

background: #456BD9;

border: 2px solid transparent;

border-radius: 99em;

color: #fff;

display: flex;

font-weight: 600;

height: 2.5em;

min-width: 2.5em;

padding: 0 1em;

position: relative;

transition: 0.2s ease;

width: 100%;

}

.Button:focus .Button-inner {

border-color: #fff;

box-shadow: 0 0 0 2px #456BD9;

}

.Button:hover .Button-inner {

filter: brightness(1.1);

}

.Button:active .Button-inner {

filter: brightness(0.9);

}

.Badge {

align-items: center;

background: #ce2c6c;

border: 2px solid #fff;

border-radius: 99em;

color: #fff;

display: flex;

font-size: 0.77em;

font-weight: 400;

height: 1.44em;

justify-content: center;

line-height: 1;

min-width: 1.44em;

position: absolute;

right: -2px;

top: -2px;

}

.u-hiddenVisually {

border: 0 !important;

clip: rect(1px, 1px, 1px, 1px) !important;

height: 1px !important;

overflow: hidden !important;

padding: 0 !important;

position: absolute !important;

width: 1px !important;

}

</style>

Mail Kutusu

</span>

4 <span class="u-hiddenVisually">Unread Messages</span>

</span>

</button>

</body>

</html>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.chip {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="chip">
  <img src="img_avatar.png" alt="Person" width="96" height="96">
  Ahmet Can
</div>

</body>
</html>

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

<!DOCTYPE html>

<html>

<head>

<style>

.chip {

display: inline-block;

padding: 0 25px;

height: 50px;

font-size: 16px;

line-height: 50px;

border-radius: 25px;

background-color: #f1f1f1;

}

.chip img {

float: left;

margin: 0 10px 0 -25px;

height: 50px;

width: 50px;

border-radius: 50%;

}

</style>

</head>

<body>

Ahmet Can

</div>

</body>

</html>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.chip {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.closebtn {
  padding-left: 10px;
  color: #888;
  font-weight: bold;
  float: right;
  font-size: 20px;
  cursor: pointer;
}

.closebtn:hover {
  color: #000;
}
</style>
</head>
<body>

<p>Gizlemek için "x" işaretine tıklayın</p>

<div class="chip">
  <img src="img_avatar.png" alt="Person" width="96" height="96">
  Hayri KOÇ
  <span class="closebtn" onclick="this.parentElement.style.display='none'">&times;</span>
</div>

</body>
</html>

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

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html>

<html>

<head>

<style>

.chip {

display: inline-block;

padding: 0 25px;

height: 50px;

font-size: 18px;

line-height: 50px;

border-radius: 25px;

background-color: #f1f1f1;

}

.chip img {

float: left;

margin: 0 10px 0 -25px;

height: 50px;

width: 50px;

border-radius: 50%;

}

.closebtn {

padding-left: 10px;

color: #888;

font-weight: bold;

float: right;

font-size: 20px;

cursor: pointer;

}

.closebtn:hover {

color: #000;

}

</style>

</head>

<body>

<p>Gizlemek için "x" işaretine tıklayın</p>

Hayri KOÇ

</div>

</body>

</html>

CSS Chip ve Badge Yapımı

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap