How To Compile Ruby in CSS
How do I make an how to compile ruby in css?
Ruby icon made 100% in CSS. It's 14 triangles, 3 rectangles, and two ovals. The topmost oval has a background gradient and some shadows to create light and dark effects, and the three rectangles look like triangles, but have background gradients as well.. What is a how to compile ruby in css? How do you make a how to compile ruby in css? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.
How To Compile Ruby in CSS Previews
How To Compile Ruby in CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>How To Compile Ruby in CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ruby-container"> <div class="triangle three"></div> <div class="triangle four"></div> <div class="triangle five"></div> <div class="triangle six"></div> <div class="mid-oval oval"> <div class="square one"></div> <div class="square two"></div> <div class="square three"></div> <div class="triangle two"></div> <div class="triangle three"></div> <div class="triangle four"></div> <div class="triangle five"></div> <div class="triangle eight"></div> <div class="triangle nine"></div> <div class="triangle ten"></div> <div class="triangle eleven"></div> </div> <div class="triangle one"></div> <div class="triangle two"></div> <div class="top-oval oval"></div>
</div> <script src="js/index.js"></script>
</body>
</html>How To Compile Ruby in CSS - Script Codes CSS Codes
.ruby-container { position: relative; width: 500px; margin: 40px auto; height: 500px; overflow: visible;
}
.ruby-container * { position: absolute;
}
.ruby-container .oval { -moz-border-radius: 50% / 50%; -webkit-border-radius: 50% / 50%; border-radius: 50% / 50%;
}
.ruby-container .triangle { width: 0; height: 0;
}
.ruby-container .top-oval { -webkit-transform: rotate(-44.5deg); -moz-transform: rotate(-44.5deg); -ms-transform: rotate(-44.5deg); -o-transform: rotate(-44.5deg); transform: rotate(-44.5deg); width: 77%; height: 34%; top: 18%; left: -2.5%; background: #b30f00; background: -moz-linear-gradient(left, #fa9a94 0%, #d62e24 10%, #9b0804 17%, #b30f00 28%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fa9a94), color-stop(10%, #d62e24), color-stop(17%, #9b0804), color-stop(28%, #b30f00)); background: -webkit-linear-gradient(left, #fa9a94 0%, #d62e24 10%, #9b0804 17%, #b30f00 28%); background: -o-linear-gradient(left, #fa9a94 0%, #d62e24 10%, #9b0804 17%, #b30f00 28%); background: -ms-linear-gradient(left, #fa9a94 0%, #d62e24 10%, #9b0804 17%, #b30f00 28%); background: linear-gradient(to right, #fa9a94 0%, #d62e24 10%, #9b0804 17%, #b30f00 28%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9a94', endColorstr='#b30f00',GradientType=1 ); -webkit-box-shadow: white 0px 0px 11px 10px, white 0px 0px 7px 0px inset, white 0px -85px 21px 35px, rgba(0, 0, 0, 0.3) 41px 0px 80px 0 inset; -moz-box-shadow: white 0px 0px 11px 10px, white 0px 0px 7px 0px inset, white 0px -85px 21px 35px, rgba(0, 0, 0, 0.3) 41px 0px 80px 0 inset; -ms-box-shadow: white 0px 0px 11px 10px, white 0px 0px 7px 0px inset, white 0px -85px 21px 35px, rgba(0, 0, 0, 0.3) 41px 0px 80px 0 inset; -o-box-shadow: white 0px 0px 11px 10px, white 0px 0px 7px 0px inset, white 0px -85px 21px 35px, rgba(0, 0, 0, 0.3) 41px 0px 80px 0 inset; box-shadow: white 0px 0px 11px 10px, white 0px 0px 7px 0px inset, white 0px -85px 21px 35px, rgba(0, 0, 0, 0.3) 41px 0px 80px 0 inset;
}
.ruby-container .mid-oval { -webkit-transform: rotate(-44.5deg); -moz-transform: rotate(-44.5deg); -ms-transform: rotate(-44.5deg); -o-transform: rotate(-44.5deg); transform: rotate(-44.5deg); width: 124%; height: 61%; top: 20.5%; left: -11%; overflow: hidden;
}
.ruby-container .mid-oval .square.one { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); background-color: #b00b0c; width: 30.4%; height: 60%; top: 44.6%; left: 32.9%; background: -moz-linear-gradient(44deg, #a70800 60%, #ffffff 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(60%, #a70800), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(44deg, #a70800 60%, #ffffff 100%); background: -o-linear-gradient(44deg, #a70800 60%, #ffffff 100%); background: -ms-linear-gradient(44deg, #a70800 60%, #ffffff 100%); background: linear-gradient(44deg, #a70800 60%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a70800', endColorstr='#ffffff',GradientType=1 );
}
.ruby-container .mid-oval .square.two { -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -ms-transform: rotate(32deg); -o-transform: rotate(32deg); transform: rotate(32deg); background-color: #b00b0c; width: 20.3%; height: 60%; top: 28.4%; left: 7%; background: -moz-linear-gradient(15deg, #a70105 40%, #ffffff 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(40%, #a70105), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(15deg, #a70105 40%, #ffffff 100%); background: -o-linear-gradient(15deg, #a70105 40%, #ffffff 100%); background: -ms-linear-gradient(15deg, #a70105 40%, #ffffff 100%); background: linear-gradient(15deg, #a70105 40%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a70105', endColorstr='#ffffff',GradientType=1 );
}
.ruby-container .mid-oval .square.three { -webkit-transform: rotate(-27deg); -moz-transform: rotate(-27deg); -ms-transform: rotate(-27deg); -o-transform: rotate(-27deg); transform: rotate(-27deg); background-color: #b00b0c; width: 24%; height: 60%; top: 31.5%; left: 69.3%; background: -moz-linear-gradient(74deg, #a70800 70%, #ffffff 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(70%, #a70800), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(74deg, #a70800 70%, #ffffff 100%); background: -o-linear-gradient(74deg, #a70800 70%, #ffffff 100%); background: -ms-linear-gradient(74deg, #a70800 70%, #ffffff 100%); background: linear-gradient(74deg, #a70800 70%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a70800', endColorstr='#ffffff',GradientType=1 );
}
.ruby-container .mid-oval .triangle.two { -webkit-transform: rotate(1.3deg); -moz-transform: rotate(1.3deg); -ms-transform: rotate(1.3deg); -o-transform: rotate(1.3deg); transform: rotate(1.3deg); top: -13.1%; left: 17.4%; border-top: transparent 173px solid; border-left: transparent 99px solid; border-right: transparent 94px solid; border-bottom: #6f0200 174px solid;
}
.ruby-container .mid-oval .triangle.three { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); top: -11%; left: 48.3%; border-top: transparent 173px solid; border-left: transparent 97px solid; border-right: transparent 94px solid; border-bottom: #6f0200 173px solid;
}
.ruby-container .mid-oval .triangle.four { -webkit-transform: rotate(30.9deg); -moz-transform: rotate(30.9deg); -ms-transform: rotate(30.9deg); -o-transform: rotate(30.9deg); transform: rotate(30.9deg); top: 18.4%; left: -10.9%; border-top: transparent 173px solid; border-left: transparent 97px solid; border-right: #7e0405 105px solid; border-bottom: transparent 173px solid;
}
.ruby-container .mid-oval .triangle.five { -webkit-transform: rotate(-23deg); -moz-transform: rotate(-23deg); -ms-transform: rotate(-23deg); -o-transform: rotate(-23deg); transform: rotate(-23deg); top: 29%; left: 73.7%; border-top: transparent 179px solid; border-left: #7e0405 97px solid; border-right: transparent 94px solid; border-bottom: transparent 173px solid;
}
.ruby-container .mid-oval .triangle.eight { -webkit-transform: rotate(47deg); -moz-transform: rotate(47deg); -ms-transform: rotate(47deg); -o-transform: rotate(47deg); transform: rotate(47deg); top: 24.5%; left: -8.5%; border-top: transparent 173px solid; border-left: #7e0405 82px solid; border-right: transparent 94px solid; border-bottom: transparent 173px solid;
}
.ruby-container .mid-oval .triangle.nine { -webkit-transform: rotate(-34deg); -moz-transform: rotate(-34deg); -ms-transform: rotate(-34deg); -o-transform: rotate(-34deg); transform: rotate(-34deg); top: 28.2%; left: 73.7%; border-top: transparent 173px solid; border-left: transparent 82px solid; border-right: #7e0405 99px solid; border-bottom: transparent 173px solid;
}
.ruby-container .mid-oval .triangle.ten { -webkit-transform: rotate(46deg); -moz-transform: rotate(46deg); -ms-transform: rotate(46deg); -o-transform: rotate(46deg); transform: rotate(46deg); top: -16.4%; left: -27.7%; border-top: transparent 173px solid; border-left: transparent 82px solid; border-right: #6f0200 94px solid; border-bottom: transparent 173px solid;
}
.ruby-container .mid-oval .triangle.eleven { -webkit-transform: rotate(-34deg); -moz-transform: rotate(-34deg); -ms-transform: rotate(-34deg); -o-transform: rotate(-34deg); transform: rotate(-34deg); top: -4.5%; left: 96.6%; border-top: transparent 151px solid; border-left: #6f0200 116px solid; border-right: transparent 94px solid; border-bottom: transparent 173px solid;
}
.ruby-container > .triangle.one { -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -ms-transform: rotate(1deg); -o-transform: rotate(1deg); transform: rotate(1deg); top: 50.7%; left: 2%; border-top: transparent 87px solid; border-left: #ce3226 36px solid; border-right: transparent 54px solid; border-bottom: transparent 66px solid;
}
.ruby-container > .triangle.two { -webkit-transform: rotate(-88deg); -moz-transform: rotate(-88deg); -ms-transform: rotate(-88deg); -o-transform: rotate(-88deg); transform: rotate(-88deg); top: -4.5%; left: 59.9%; border-top: transparent 87px solid; border-left: transparent 54px solid; border-right: #ce3226 37px solid; border-bottom: transparent 69px solid;
}
.ruby-container > .triangle.three { -webkit-transform: rotate(-93.6deg); -moz-transform: rotate(-93.6deg); -ms-transform: rotate(-93.6deg); -o-transform: rotate(-93.6deg); transform: rotate(-93.6deg); top: 51.4%; left: 48.15%; border-top: transparent 3px solid; border-left: #890600 41px solid; border-right: transparent 50px solid; border-bottom: transparent 365px solid;
}
.ruby-container > .triangle.four { -webkit-transform: rotate(4.4deg); -moz-transform: rotate(4.4deg); -ms-transform: rotate(4.4deg); -o-transform: rotate(4.4deg); transform: rotate(4.4deg); top: 19.6%; left: 77.2%; border-top: transparent 3px solid; border-left: transparent 41px solid; border-right: #d02e35 60px solid; border-bottom: transparent 371px solid;
}
.ruby-container > .triangle.five { -webkit-transform: rotate(-50.5deg); -moz-transform: rotate(-50.5deg); -ms-transform: rotate(-50.5deg); -o-transform: rotate(-50.5deg); transform: rotate(-50.5deg); top: 64.1%; left: 36.6%; border-top: transparent 73px solid; border-left: transparent 41px solid; border-right: #d02e35 176px solid; border-bottom: transparent 218px solid;
}
.ruby-container > .triangle.six { -webkit-transform: rotate(-50.5deg); -moz-transform: rotate(-50.5deg); -ms-transform: rotate(-50.5deg); -o-transform: rotate(-50.5deg); transform: rotate(-50.5deg); top: 31.5%; left: 64.6%; border-top: transparent 73px solid; border-left: #890600 205px solid; border-right: transparent 41px solid; border-bottom: transparent 199px solid;
}
How To Compile Ruby in CSS - Script Codes JS Codes
(function() {
}).call(this);
| Developer | Brett Clanton |
| Username | brettclanton001 |
| Uploaded | August 15, 2022 |
| Rating | 3.5 |
| Size | 5,089 Kb |
| Views | 32,384 |
Do you need developer help for How To Compile Ruby 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 | Size |
| Cool flat-yet-3d - ALL CSS | 2,697 Kb |
| Compass Icon - ALL CSS | 3,654 Kb |
| Hidden scrollbar in all browsers | 2,329 Kb |
| Mac Pro page | 2,643 Kb |
| A Pen by Brett Clanton | 2,791 Kb |
| Mincraft cube experiment ALL CSS | 8,956 Kb |
| Staging Embed Widget | 2,642 Kb |
| Fun with columns | 2,880 Kb |
| Dribbble logo in CSS | 2,444 Kb |
| Space Sun Design - All CSS | 6,391 Kb |
Create amazing web content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
| Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
| Simple Weather App | Cmwebby | 0 Kb |
| Content Changer | Cliffpyles | 4,538 Kb |
| Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
| Planet Awesome | Bartuc | 3,554 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| Whyutils | LeYvan | 3,752 Kb |
| Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
| SVG Circle Progress | JMChristensen | 3,368 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!