Dribbble logo in CSS

Developer
Brett Clanton
Size
2,444 Kb
Views
56,672
  1. Dribbble logo in CSS Previews
  2. Dribbble logo in CSS HTML Codes
  3. Dribbble logo in CSS CSS Codes

How do I make an dribbble logo in css?

I saw this and thought it would be fun to make in css! The only thing not CSS is the background pattern behind the icon. Everything else including shadows, and basketball logo area all CSS. What is a dribbble logo in css? How do you make a dribbble logo in css? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.

Dribbble logo in CSS Previews
IQ Test

Dribbble logo in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dribbble logo in CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo-area"> <div class="icon-container"> <div class="shadow"></div> <div class="icon"> <div class="dribbble-circle"></div> <div class="dribbble"> <div class="line one"></div> <div class="line two"></div> <div class="line three"></div> </div> </div> </div> <div class="inspired">Inspired by <a href="http://dribbble.com/shots/1106811-Dribbble" target="_blank">Dribbble</a></div>
</div>
</body>
</html>

Dribbble logo in CSS - Script Codes CSS Codes

// .dribbble { overflow: visible !important; }
/* uncomment above to see how it's done */
.logo-area { background: #f378aa url(http://fathomless-island-8523.herokuapp.com/assets/dribble_bg_pattern.jpg); position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .icon-container { position: absolute; top: 50%; left: 50%; height: 0; width: 0; } .icon { position: absolute; top: -48px; left: -48px; width: 96px; height: 96px; background: #f06798; -webkit-box-shadow: inset #f77bb4 1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; -moz-box-shadow: inset #f77bb4 1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; -ms-box-shadow: inset #f77bb4 1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; -o-box-shadow: inset #f77bb4 1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; box-shadow: inset #f77bb4 1px 1px 1px, rgba(0,0,0,0.2) 1px 1px 2px; } .shadow { position: absolute; top: -17px; left: -25px; width: 136px; height: 120px; background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .dribbble-circle { position: absolute; top: 10px; left: 10px; width: 64px; height: 64px; border: 6px #FFF solid; -webkit-border-radius: 50% / 50%; -moz-border-radius: 50% / 50%; -ms-border-radius: 50% / 50%; -o-border-radius: 50% / 50%; border-radius: 50% / 50%; } .dribbble { position: relative; height: 66px; width: 66px; margin: 15px; border: 0px #FFF solid; -webkit-border-radius: 50% / 50%; -moz-border-radius: 50% / 50%; -ms-border-radius: 50% / 50%; -o-border-radius: 50% / 50%; border-radius: 50% / 50%; overflow: hidden; } .line { position: absolute; border: 6px #FFF solid; -webkit-border-radius: 50% / 50%; -moz-border-radius: 50% / 50%; -ms-border-radius: 50% / 50%; -o-border-radius: 50% / 50%; border-radius: 50% / 50%; } .line.one { width: 107px; height: 100px; top: -81px; left: -46px; } .line.two { width: 92px; height: 100px; top: 29px; left: -2px; } .line.three { width: 92px; height: 210px; top: -10px; left: -51px; } .inspired { position: absolute; left: 0; right: 0; bottom: 0; line-height: 30px; font-family: sans-serif; text-align: center; color: #FFF; } .inspired a { color: #FFF; }
Dribbble logo in CSS - Script Codes
Dribbble logo in CSS - Script Codes
Home Page Home
Developer Brett Clanton
Username brettclanton001
Uploaded August 15, 2022
Rating 3.5
Size 2,444 Kb
Views 56,672
Do you need developer help for Dribbble logo in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brett Clanton (brettclanton001) Script Codes
Name
Staging Embed Widget
Fun with columns
Left Align
Hidden scrollbar in all browsers
Cool flat-yet-3d - ALL CSS
A Pen by Brett Clanton
How To Compile Ruby in CSS
Compass Icon - ALL CSS
Mincraft cube experiment ALL CSS
Mac Pro page
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!