Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/css-profile-images.html

Created February 20, 2021 00:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save w3collective/e989379adab7935d001d2e4fd58a0da1 to your computer and use it in GitHub Desktop.
Save w3collective/e989379adab7935d001d2e4fd58a0da1 to your computer and use it in GitHub Desktop.
Download ZIP
Ways to use CSS to enhance user profile images
Raw
css-profile-images.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>5 Stylish ways to use CSS to enhance user profile images</title>
<style>
html {
height: 100%;
}
body {
background: #000;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.profile-image {
margin-right: 5%;
}
.css-shadow {
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid #cddc39;
filter: drop-shadow(0 0 8px #ff5722);
}
.css-border {
border: 4px solid #cddc39;
padding: 2px;
border-radius: 50%;
border-top-color: #ff5722;
border-left-color: #ff5722;
width: 75px;
height: 75px;
}
.css-after {
position: relative;
}
.css-after img {
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid #cddc39;
}
.css-after::after {
content: "";
width: 85px;
height: 91px;
border-radius: 50%;
background-color: #ff5722;
display: block;
position: absolute;
top: -6px;
left: -3px;
z-index: -1;
}
.css-after-gradiant {
position: relative;
}
.css-after-gradiant img {
width: 75px;
height: 75px;
border-radius: 50%;
}
.css-after-gradiant::after {
content: "";
width: 85px;
height: 85px;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(255, 87, 34, 1) 0%,
rgba(205, 220, 57, 1) 100%,
rgba(0, 212, 255, 1) 100%
);
display: block;
position: absolute;
top: -5px;
left: -5px;
z-index: -1;
}
.svg-half {
position: relative;
}
.svg-half img {
border-radius: 50%;
width: 75px;
height: 75px;
}
.svg-half svg {
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
stroke: #ff5722;
stroke-width: 6;
transform: rotate(90deg);
stroke: url(#gradiant);
}
</style>
</head>
<body>
<div class="profile-image">
<img class="css-shadow" src="https://i.pravatar.cc/75" />
</div>
<div class="profile-image">
<img class="css-border" src="https://i.pravatar.cc/75" />
</div>
<div class="profile-image">
<div class="css-after">
<img src="https://i.pravatar.cc/75" />
</div>
</div>
<div class="profile-image">
<div class="css-after-gradiant">
<img src="https://i.pravatar.cc/75" />
</div>
</div>
<div class="profile-image">
<div class="svg-half">
<img src="https://i.pravatar.cc/75" />
<svg>
<linearGradient id="gradiant">
<stop offset="0%" style="stop-color: #ff5722" />
<stop offset="100%" style="stop-color: #cddc39" />
</linearGradient>
<path d="M0,38 a1,1 0 0,0 75,0" />
</svg>
</div>
</div>
</body>
</html>
@w3collective
Copy link
Author

Source => https://w3collective.com/stylish-ways-to-enhance-profile-images/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment