https://stackoverflow.com/questions/20056885
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian
I did it! I had to get used to only being able to use 'border-radius' for any kind of shape in CSS† though (note: not entirely true).
The main problem here is the overlapping one caused by a cycle of shapes having to be above each other.
The 2 main approaches here are:
- using a transparent shape and a solid right border (thanks, @Christoph!) to 'cut' from the gear connector (shown below);
- simulating negative border-radii using CS3 gradients for the gear connector so no shapes to cut the part that we don't want are required (better, as allows for a transparent background);
Here's a JSFiddle with the compiled CSS, and the result of the first approach.
HTML:
<span class='wrapper'>
<span class='logo'>
<span class='circle black' id='left_middle'> </span>
<span class='circle dark_grey' id='left_right'> </span>
<span class='circle grey' id='left_left'> </span>
<span class='circle left black'> </span>
<span class='circle left small white'> </span>
<span class='circle top grey' id='left_top'> </span>
<span class='circle pink' id='right_middle'> </span>
<span class='circle grey' id='right_right'> </span>
<span class='grey' id='right_left'> </span>
<span class='circle top pink'> </span>
<span class='circle top white small'> </span>
<span class='circle right pink'> </span>
<span class='circle right small white'> </span>
</span>
<span class='text'>
<span class='bold'>BRL</span><span class='thin'>CAD</span>
</span>
</span>
SCSS/SASS:
/* Fonts */
@font-face {
font-family: 'BRL-CAD';
src: url('fonts/Grandesign Neue Roman.ttf');
}
@font-face {
font-family: 'BRL-CAD Bold';
src: url('fonts/Grandesign Neue Roman Bold.ttf');
}
/* Shapes */
$large_radius: 75px;
$small_radius: 45px;
/* Positions */
$all_left: 10px;
$all_top: 55px;
$top_left: $all_left + 55px;
$top_top: $all_top;
$left_left: $all_left;
$left_top: $all_top + 52px;
$right_left: $all_left + 100px;
$right_top: $all_top + 57px;
$right_middle_left: ($top_left + $right_left) / 2;
$right_middle_top: ($top_top + $right_top) / 2;
$right_right_left: $all_left + 129px;
$right_right_top: $all_top - 11.5px;
$right_left_diff: 50px;
$right_left_left: $all_left + 63px;
$right_left_top: $all_top + 72.5px;
$left_middle_left: ($top_left + $left_left) / 2;
$left_middle_top: ($top_top + $left_top) / 2;
$left_right_left: $all_left + 73.5px;
$left_right_top: $all_top + 64.5px;
$left_left_left: $all_left - 18px;
$left_left_top: $all_top - 21px;
$left_top_diff: 3px;
$left_top_left: $top_left - $left_top_diff;
$left_top_top: $top_top - $left_top_diff;
$logo_width: $right_left + $large_radius + $all_left;
$logo_height: $right_top + $large_radius + $all_top ;
$all_width: $logo_width + 290px;
$all_height: $logo_height;
/* Colors */
$pink: rgb(217, 27, 91);
$grey: rgb(235, 235, 235);
$dark_grey: rgb(230, 230, 230);
/* Normalized CSS */
.wrapper, .wrapper .logo, .wrapper .logo *, .wrapper .logo *:before, .wrapper .logo *:after {
display: block;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
/* Logo + Text */
.wrapper {
/* CSS Tricks */
position: relative;
overflow: hidden;
width: $all_width ;
height: $all_height;
> * {
float:left;
display:inline;
}
/* Background */
$start: rgb(240, 240, 240);
$stop: rgb(225, 225, 225);
background: $dark_grey; // non-CSS3 browsers
background: -webkit-gradient(linear, left top, left bottom, from($start), to($stop)); // for WebKit
background: -moz-linear-gradient(top, $start, $stop); // for Firefox
background: linear-gradient(0deg, $stop, $start); // for standards-compliance
/* Logo */
.logo {
/* CSS Tricks */
@extend .wrapper;
width: $logo_width ;
height: $logo_height;
* {
position: absolute;
}
/* Colors */
@mixin colorize($name, $color) {
[class*=#{$name}] {
background-color: $color;
}
}
@include colorize('white', white);
@include colorize('black', black);
@include colorize('pink', $pink);
@include colorize('grey', $grey);
@include colorize('dark_grey', $dark_grey);
/* Shapes */
[class*=circle] {
width: $large_radius;
height: $large_radius;
border-radius: 50%;
}
[class*=small] {
$margin: ($large_radius - $small_radius) / 2;
margin-left: $margin;
margin-top: $margin;
width: $small_radius;
height: $small_radius;
}
/* Classes and IDs */
[class*=top] {
left: $top_left;
top: $top_top;
}
[class*=left] {
left: $left_left;
top: $left_top;
}
[class*=right] {
left: $right_left;
top: $right_top;
}
#right_middle {
left: $right_middle_left + 5px;
top: $right_middle_top;
}
#right_right {
left: $right_right_left;
top: $right_right_top;
}
#right_left {
left: $right_left_left;
top: $right_left_top;
$radius: $right_left_diff;
width: $radius / 2;
height: $radius;
border-right: $radius / 4 solid $dark_grey;
border-radius: 0 $radius / 2 $radius / 2 0;
background: transparent;
}
#left_middle {
left: $left_middle_left; //76px;
top: $left_middle_top; //40px;
}
#left_right {
left: $left_right_left;
top: $left_right_top;
}
#left_left {
left: $left_left_left;
top: $left_left_top;
}
#left_top {
left: $left_top_left;
top: $left_top_top;
$radius: $large_radius + 2*$left_top_diff;
width: $radius;
height: $radius;
}
}
/* Text */
.text {
margin-left: 5px;
margin-top: $all_top + 10px;
font-size: 75px;
.bold {
color: $pink;
font-weight: bold;
font-family: 'BRL-CAD Bold', sans-serif;
}
.thin {
color: black;
font-family: 'BRL-CAD', sans-serif;
}
}
}
