Is there a way to create a chrome-like tab using CSS? - css
I have been looking for a Google Chrome-like tab written using CSS but cannot find one.
I am trying to replicate the look in order to use it in a web application or a website.
yeah its possible, with css3
Ive posted a blog about how to its a lil depthy, and sadly enouth not going to work on ie unless you use images
Edit:
Removed old reference to redeyeoperations cause its a link farm now.
This is a bit lighter version also it is up on a 3rd party site, so its less likely to be down.
http://codepen.io/jacoblwe20/pen/DxAJF
Here is the code
var tabs = $('.tabs > li');
tabs.on("click", function(){
tabs.removeClass('active');
$(this).addClass('active');
});
body {
background: #efefef;
font: .8em sans-serif;
margin: 0;
}
.tab-container {
background: #2BA6CB;
margin: 0;
padding: 0;
max-height: 35px;
}
ul.tabs {
margin: 0;
list-style-type: none;
line-height: 35px;
max-height: 35px;
overflow: hidden;
display: inline-block;
padding-right: 20px
}
ul.tabs > li.active {
z-index: 2;
background: #efefef;
}
ul.tabs > li.active:before {
border-color: transparent #efefef transparent transparent;
}
ul.tabs > li.active:after {
border-color: transparent transparent transparent #efefef;
}
ul.tabs > li {
float: right;
margin: 5px -10px 0;
border-top-right-radius: 25px 170px;
border-top-left-radius: 20px 90px;
padding: 0 30px 0 25px;
height: 170px;
background: #ddd;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
max-width: 200px;
}
ul.tabs > li > a {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: #222;
}
ul.tabs > li:before,
ul.tabs > li:after {
content: '';
background: transparent;
height: 20px;
width: 20px;
border-radius: 100%;
border-width: 10px;
top: 0px;
border-style: solid;
position: absolute;
}
ul.tabs > li:before {
border-color: transparent #ddd transparent transparent;
-webkit-transform: rotate(48deg);
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-o-transform: rotate(48deg);
transform: rotate(48deg);
left: -23px;
}
ul.tabs > li:after {
border-color: transparent transparent transparent #ddd;
-webkit-transform: rotate(-48deg);
-moz-transform: rotate(-48deg);
-ms-transform: rotate(-48deg);
-o-transform: rotate(-48deg);
transform: rotate(-48deg);
right: -17px;
}
/* Clear Fix took for HTML 5 Boilerlate*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=tab-container>
<ul class="tabs clearfix" >
<li>
<a href=# >Users</a>
</li>
<li class=active >
<a href=# >Pending Lots</a>
</li>
<li>
<a href=# >Nearby Lots</a>
</li>
<li>
<a href=# >Recent Lots</a>
</li>
</ul>
</div>
<div class=outer-circle></div>
I am just giving some css for getting chrome like tabs, rest its up to you to use as you want.
<style type='text/css'>
.chrome_tab {
width: 150px;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 20px solid grey;
border-radius: 80px 80px 2px 2px;
color: white;
text-align: center;
}
</style>
<div class='chrome_tab'>
muhammad(peace be upon him)
</div>
demo here
http://jsfiddle.net/GH7d6/
What about this :
http://codepen.io/justd/pen/dPeKEG/
Find tuto here .
#import "compass/css3";
#import "compass";
.tab-container {
background: #8dc8fb;
margin: 0;
padding: 0;
max-height: 40px;
ul {
&.nav-tabs {
margin: 0;
list-style-type: none;
line-height: 40px;
max-height: 40px;
overflow: hidden;
display: inline-block;
#include display-flex;
padding-right: 20px;
border-bottom: 5px solid #f7f7f7;
$color: #c3d5e6;
> li {
$raduis: 28px 145px;
margin: 5px -14px 0;
#include border-top-left-radius($raduis);
#include border-top-right-radius($raduis);
padding: 0 30px 0 25px;
height: 170px;
background: $color;
position: relative;
#include box-shadow(0 4px 6px rgba(0,0,0,.5));
width: 200px;
max-width: 200px;
min-width: 20px;
border:1px solid #aaa;
&:first-child {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
> a {
display: block;
max-width:100%;
text-decoration: none;
color: #222;
padding: 3px 7px;
span {
overflow: hidden;
white-space: nowrap;
display: block;
}
&:focus,
&:hover {
background-color: transparent;
border-color: transparent;
}
.glyphicon-remove {
color: #777;
display: inline-block;
padding:3px;
font-size: 10px;
position:absolute;
z-index: 10;
top:7px;
right: -10px;
#include border-radius(50%);
&:hover {
background: #d39ea3;
color: white;
#include box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
#include text-shadow(0 1px 1px rgba(0,0,0,.25));
}
}
}
&.active {
z-index: 2;
#include background-image(linear-gradient(white, #f7f7f7 30px));
> a {
background-color: transparent;
border-color: transparent;
border-bottom-color: transparent;
&:focus,
&:hover {
background-color: transparent;
border-color: transparent;
border-bottom-color: transparent;
}
}
}
}
.btn {
float: left;
height: 20px;
width: 35px;
min-width: 35px;
max-width: 35px;
margin: 10px 0 0 0;
border-color: #71a0c9;
outline: none;
#include transform(skew(30deg));
&.btn-default {
background: $color;
&:hover {
background: #d2deeb;
}
&:active {
background: #9cb5cc;
}
}
}
}
}
.tab-pane {
padding: 60px 40px;
text-align: center;
&.active {
border-top:1px solid #ddd;
}
}
}
I created here tabs like google chrome stylish UI, you can find the light and dark themes in the attached pen.
<div class="sd-tabs" dark>
<div class="sd-header-tabs">
<div class="sd-group-tabs">
<input class="sd-tab-radio" type="radio" tab id="rTab-1" name="tab">
<label class='sd-tab-label' for='rTab-1'>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Descricao da tab bem grande para teste</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<input class="sd-tab-radio" type="radio" tab id="rTab-2" name="tab">
<label class='sd-tab-label' for='rTab-2' icon-only>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc"></div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<input class="sd-tab-radio" type="radio" tab id="rTab-3" name="tab">
<label class='sd-tab-label' for='rTab-3'>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Descricao da tab bem grande para teste</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<input class="sd-tab-radio" type="radio" tab id="rTab-4" name="tab">
<label class='sd-tab-label' for='rTab-4'>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Descricao da tab bem grande para teste</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<input class="sd-tab-radio" type="radio" tab id="rTab-5" name="tab">
<label class='sd-tab-label' for='rTab-5'>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Descricao da tab bem grande para teste</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<input class="sd-tab-radio" type="radio" tab id="rTab-6" name="tab">
<label class='sd-tab-label' for='rTab-6'>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Descricao da tab bem grande para teste</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
<input class="sd-tab-radio" type="radio" tab id="rTab-7" name="tab">
<label class='sd-tab-label' for='rTab-7'>
<div class="sd-tab-icon">
<svg aria-hidden="true" data-prefix="fab" data-icon="whatsapp"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
class="svg-inline--fa fa-whatsapp fa-w-14 fa-2x">
<path fill="currentColor"
d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</div>
<div class="sd-tab-desc">Descricao da tab bem grande para teste</div>
<div class="sd-tab-icon sd-tab-close">
<svg aria-hidden="true" data-prefix="fal" data-icon="times" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-2x">
<path fill="currentColor"
d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" />
</svg>
</div>
</label>
</div>
</div>
</div>
Related
svg outline and fill
I have an svg of a heart with a black outline. I am interested in changing the outline to a red path, and then programmatically once it is clicked, I would like to fill the heart completely red. Similar to a like button. I can just have two different images I swap, but I would like to understand how it can be done by just changing parameters to a single svg. Here is the heart svg: <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"> <path d="M24 41.95 21.95 40.1Q13.8 32.65 8.9 27.1Q4 21.55 4 15.85Q4 11.35 7.025 8.325Q10.05 5.3 14.5 5.3Q17.05 5.3 19.55 6.525Q22.05 7.75 24 10.55Q26.2 7.75 28.55 6.525Q30.9 5.3 33.5 5.3Q37.95 5.3 40.975 8.325Q44 11.35 44 15.85Q44 21.55 39.1 27.1Q34.2 32.65 26.05 40.1ZM24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15Q24 23.15 24 23.15ZM24 38Q31.6 31 36.3 25.85Q41 20.7 41 15.85Q41 12.55 38.875 10.425Q36.75 8.3 33.5 8.3Q31 8.3 28.8 9.85Q26.6 11.4 25.2 14.3H22.75Q21.4 11.4 19.175 9.85Q16.95 8.3 14.5 8.3Q11.2 8.3 9.1 10.425Q7 12.55 7 15.85Q7 20.7 11.7 25.85Q16.4 31 24 38Z" /> </svg> if I had the fill parameter to the svg element, specifically fill="red" it, takes care of creating a red outline, which is the default behavior I want. Is there another parameter I can use so that the interior of the SVG will turn completely red and not just the outline of the heart shape?
Rather than trying to fill in what you have which is currently a path that makes up only the "stroke" (which in this case is actually the entire SVG), it would be much easier to use a heart shape that is solid and then change the attributes with a simple classList.toggle javascript. This way, you could control the stroke and the fill independently.
let svg = document.getElementById("heart");
svg.addEventListener('click', function() {
svg.classList.toggle("filled");
})
body {
background-color: lightgrey;
}
#heart {
fill: transparent;
stroke: red;
stroke-width: 20px;
transition: all 0.6s linear;
}
#heart.filled {
fill: red;
stroke: red;
stroke-width: 20px;
transition: all 0.6s linear;
}
<svg id="heart" xmlns="http://www.w3.org/2000/svg" height="200px" width="200px" viewBox="0 0 612 792">
<path d="M611.721,288.299c-2.258-42.176-20.114-81.782-50.287-111.524c-30.557-30.119-70.43-46.708-112.27-46.708
c-62.267,0-107.396,49.233-131.641,75.684c-3.743,4.085-8.13,8.87-11.183,11.79c-2.444-2.529-5.756-6.3-8.803-9.768
c-22.142-25.222-68.223-77.704-134.688-77.704c-41.84,0-81.711,16.588-112.268,46.708C20.408,206.517,2.547,246.121,0.29,288.299
c-2.248,42.107,8.521,78.746,34.92,118.803c20.888,31.701,75.961,93.605,133.927,150.543c29.856,29.326,57.336,54.18,79.466,71.873
c35.936,28.729,49.7,32.413,57.674,32.413c7.476,0,21.614-3.352,57.895-32.332c22.079-17.637,49.463-42.451,79.194-71.76
c57.445-56.63,112.318-118.617,133.443-150.743C594.576,380.072,614.6,342.151,611.721,288.299z"/>
</svg>
Trouble getting an SVG to other side of card body and need to reverse it
I have an SVG that I need to be on the opposite side of the card and reversed. Any changes I seem to make only move it up a little or make it disappear. Any help would be much appreciated: This Picture below is what I have, but the svg needs to be on the other side and turned about as to finish the paragraph. <div class="row featurette" id="ourMission"> <div class="col-md-7"> <div class="card"> <div class="card-body"> <span class="svg-icon text-primary mb-3"> <svg width="300" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="#377dff"/> </svg> </span> <!-- Blockquote --> <figure> <blockquote class="blockquote blockquote-sm"> <!--IN The size-->
Why not just put the svg another time after the content and apply a rotate ? <div class="row featurette" id="ourMission"> <div class="col-md-7"> <div class="card"> <div class="card-body"> <span class="svg-icon text-primary mb-3"> <svg width="300" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="#377dff"/> </svg> </span> <!-- Blockquote --> <figure> <blockquote class="blockquote blockquote-sm"> <!--IN The size--> <svg width="300" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(180deg)"> <path d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="#377dff"/> </svg>
How do I create a responsive footer for mobiles
I have a fixed footer on the following website;
https://sen-seis.com/dev/
I would like to be able to change the contents of the footer if the website is accessed from a mobile phone.
Is there a way to amend the footer.php file to only display certain parts of the footer if using the mobile. The code is;
<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
<table width="80%" border="0px" align="center">
<tr border="0px">
<td width="25%"><div class="site-info">
Copyright <?php echo date('Y'); ?> © Sen Seis. All rights reserved
</div><!-- .site-info -->
<!-- .site-info --> </td>
<td width="20%"> <div class="contact-email" ><span><i class="sydney-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#069146" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path> </svg></i></span> <b> info#sen-seis.com</b> </div>
</td>
<td>
<a href="https://www.facebook.com/relaxmymuscles/" > <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg> </a href>
<a href="https://www.instagram.com/senseis._/" > <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg> </a href>
<a href="https://www.google.com/maps/place/Sen-Seis+Massage+Therapy/#51.5969996,-0.284717,15z/data=!4m5!3m4!1s0x0:0x62567b567dd73a63!8m2!3d51.5970056!4d-0.2847197">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="none" stroke="#069146" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>
</a>
<a href="https://wa.me/447368647489">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 24 24" fill="#069146"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm.14 4.5a7.34 7.34 0 0 0-6.46 10.82l.15.26L4.5 19.5l4.08-1.3a7.38 7.38 0 0 0 10.92-6.4c0-4.03-3.3-7.3-7.36-7.3zm0 1.16c3.41 0 6.19 2.76 6.19 6.15a6.17 6.17 0 0 1-9.37 5.27l-.23-.15-2.38.76.77-2.28a6.08 6.08 0 0 1-1.17-3.6 6.17 6.17 0 0 1 6.19-6.15zM9.66 8.47a.67.67 0 0 0-.48.23l-.14.15c-.2.23-.5.65-.5 1.34 0 .72.43 1.41.64 1.71l.14.2a7.26 7.26 0 0 0 3.04 2.65l.4.14c1.44.54 1.47.33 1.77.3.33-.03 1.07-.43 1.22-.85.15-.42.15-.78.1-.85-.02-.05-.08-.08-.15-.12l-1.12-.54a5.15 5.15 0 0 0-.3-.13c-.17-.06-.3-.1-.41.09-.12.18-.47.58-.57.7-.1.1-.18.13-.32.08l-.4-.18a4.64 4.64 0 0 1-2.13-1.98c-.1-.18-.01-.28.08-.37l.27-.31c.1-.1.12-.18.18-.3a.3.3 0 0 0 .01-.26l-.1-.23-.48-1.15c-.15-.36-.3-.3-.4-.3l-.35-.02z"/></svg>
</a>
</td>
</tr>
</table>
</footer><!-- #colophon -->
Yo
Tty this
#media screen and (max-width:1200) {
.texttohide {
display : none;
}
}
<div>
<span class="textodisplayallthetime">BLABLABLA</span>
<span class="texttohide">this text will be hidden if the width of the device is under 1200 px, this should work for the majority of the cellphone</span>
</div>
fill half of svg polygon shape - star
I am using this and was looking to add a new css class 'half' to the star selected class, to only fill half the star shape with the background color: #e54800
https://foundation.zurb.com/building-blocks/blocks/star-rating.html
So it would be: <div class="star selected half">
.rating-block {
padding: 2px 5px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.rating-block .ratings-type {
margin-right: 1rem;
margin-bottom: 0;
}
.rating-block .rating-block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 2rem;
}
.rating-block .rating-block-rating {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.rating-block .star {
cursor: pointer;
stroke: #cc4b37;
}
.rating-block .rating-block-rating .star.selected polygon {
fill: #cc4b37;
}
.rating-block .rating-block-rating.is-voted .star polygon {
fill: #cc4b37;
}
.rating-block .rating-block-rating.is-voted .star.selected ~ .star polygon {
fill: transparent;
}
<div class="rating-block">
<div class="rating-block-rating" data-rating>
<div class="star selected">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
</div>
</div>
You can define a gradient using another svg (to avoid repeating it inside each one) and use the gradient with fill. You can easily adjust the % values or create more gradient if you want different other fill
.rating-block {
padding: 2px 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-block .ratings-type {
margin-right: 1rem;
margin-bottom: 0;
}
.rating-block .rating-block {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.rating-block .rating-block-rating {
display: flex;
}
.rating-block .star {
cursor: pointer;
stroke: #cc4b37;
}
.rating-block .rating-block-rating .star.selected polygon {
fill: #cc4b37;
}
.rating-block .rating-block-rating .star.half polygon {
fill: url(#grad);
}
.rating-block .rating-block-rating.is-voted .star polygon {
fill: #cc4b37;
}
.rating-block .rating-block-rating.is-voted .star.selected~.star polygon {
fill: transparent;
}
<svg height="0" width="0">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#cc4b37;stop-opacity:1" />
<stop offset="50%" style="stop-color:#cc4b37;stop-opacity:1" />
<stop offset="50%" style="stop-color:transparent;stop-opacity:1" />
<stop offset="100%" style="stop-color:transparent;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<div class="rating-block">
<div class="rating-block-rating" data-rating>
<div class="star selected">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star half">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
<div class="star">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="37" viewBox="0 0 40 37">
<polygon fill="none" points="272 30 260.244 36.18 262.489 23.09 252.979 13.82 266.122 11.91 272 0 277.878 11.91 291.021 13.82 281.511 23.09 283.756 36.18" transform="translate(-252)" />
</svg>
</div>
</div>
</div>
By the way here is an easier way to handle the rating without having to use the svg multiple time and define a gradient for the fill. You can use svg as background and simply control the width to control the rating:
.rating{
width: calc(45px * 5);
height: 45px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="%23cc4b37" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
position:relative;
}
.rating:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width: calc(45px * 5);
z-index:-1;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="transparent" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}
<div class="rating">
</div>
<div class="rating" style="width:calc(45px * 2)">
</div>
<div class="rating" style="width:calc(45px * 2.5)">
</div>
<div class="rating" style="width:calc(45px * 4.75)">
</div>
<div class="rating" style="width:calc(45px * 1.75)">
</div>
Can also be improved with CSS variable:
.rating{
width: calc(45px * 5);
height: 45px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="transparent" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
position:relative;
}
.rating:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width: calc(45px * var(--r,1));
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="-40 -40 80 80"><path fill="%23cc4b37" stroke="%23cc4b37" stroke-width="2" d="M 0.000 20.000 L 23.511 32.361 L 19.021 6.180 L 38.042 -12.361 L 11.756 -16.180 L 0.000 -40.000 L -11.756 -16.180 L -38.042 -12.361 L -19.021 6.180 L -23.511 32.361 L 0.000 20.000 "/></svg>');
}
<div class="rating">
</div>
<div class="rating" style="--r:2">
</div>
<div class="rating" style="--r:2.5">
</div>
<div class="rating" style="--r:4.75">
</div>
<div class="rating" style="--r:1.75">
</div>
Center a div with an svg and text inside of it
How would I center these elements horizontally?
Fiddle: http://jsfiddle.net/qfbszLt1/
#icon-link-wrap {
float: left;
height: 30px;
margin-right: 15px;
width: 30px;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
www.example.com
</div>
Instead of using float: left use display: inline-block and apply text-align: center to the parent div (#icon-full-wrap).
#icon-link-wrap {
display: inline-block;
vertical-align: middle;
height: 30px;
margin-right: 15px;
width: 30px;
}
#icon-full-wrap {
text-align: center;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
www.example.com
</div>
I do it for myself
CSS
#icon-link-wrap {
height: 30px;
margin-right: 15px;
width: 30px;
margin-left: 50%;
transform: translateX(-50%);
}
I hope that I helped you.