Updated again with Safari screenshot after #LGSon's answer:
Update:
Thanks for your answers, but the following code does not produce the correct effet, one can clearly see the separation between the SVG and the a tag because of the difference in height:
.divsclass {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146 206'%3E%3Cdefs%3E%3Cstyle%3E.c1%7Bfill:%23fff;%7D.c2%7Bfill:none;stroke:%23a0310f;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;%7D%3C/style%3E%3C/defs%3E%3Cpath d='M146 0H98.53l-1 .47-94 94a12 12 0 0 0 0 17l94 94L99 206h47z' class='c1'/%3E%3Cpath d='M113.18 28.2l-73 74.8 73 74.81' class='c2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.divsclass a {
color: red;
text-transform: uppercase;
background-color: white;
margin-left: .75em;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
font-size: 75%;
}
<div style="padding: 1em; background: black">
<div class="divsclass"><a role="button">BACK</a></div>
</div>
I'm trying to create the following button where the text inside it (BACK in the example below) can be of variable length. I'm trying with a background image on the left and a border radius on the right but it's not working (using :before). Any ideas?
P.S. I do have an image of the left triangle as a separate SVG if that helps.
This can be done using CSS alone in combination with the pseudo elements
a {
position: relative;
display: inline-block;
padding: 2px 10px 2px 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
text-decoration: none;
}
a::before,
a::after {
position: absolute;
content: '';
left: 0;
top: 50%;
width: 100%;
padding-bottom: 100%;
background: lightgray;
transform: rotate(-45deg);
transform-origin: left top;
z-index: -1;
}
a::after {
left: 5px;
border: 1px solid black;
}
BACK
Updated
And here is a version using the existing SVG and a pseudo
span {
display: inline-block;
background-color: black;
padding: 2px 10px 2px 20px;
}
a {
position: relative;
display: block;
color: red;
padding: 2px 10px 2px 0;
text-transform: uppercase;
background-color: white;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
font-size: 75%;
}
a::before {
content: '';
position: absolute;
top: 0;
left: -14px;
height: 100%;
width: 15px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146 206'%3E%3Cdefs%3E%3Cstyle%3E.c1%7Bfill:%23fff;%7D.c2%7Bfill:none;stroke:%23a0310f;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;%7D%3C/style%3E%3C/defs%3E%3Cpath d='M146 0H98.53l-1 .47-94 94a12 12 0 0 0 0 17l94 94L99 206h47z' class='c1'/%3E%3Cpath d='M113.18 28.2l-73 74.8 73 74.81' class='c2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
<span><a role="button">BACK</a></span>
If you use a div as a button and an image as a background you can make your CSS like this:
div.divsclass {
border-radius: 15px 50px 30px 5px:
}
So you can set the border-radius in all of the 4 corners, if you want to only with CSS. Or edit your SVG, as mentioned before.
Related
I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it
CSS
#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
You can also use a pseudo and transform:
a {
display: inline-block;/* fallback*/
position: relative;
overflow: hidden;
border-radius:5px 5px 0 0;
padding: 1em 3em 1em 2em;
}
a:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120%;
height: 200%;
z-index: -1;
background: tomato;
border-radius:inherit;
transform: skew(35deg)
}
nav {
display: flex;
margin: 1em;
}
<nav> some link
some link
some link
</nav>
Use a zero height DIV with a big border:
.tab {
width: 100px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<div class="tab"></div>
More info here: https://css-tricks.com/snippets/css/css-triangle/
Does anyone knows how to achieve the following effect using CSS? (I'm referring to the shadows between each circle)
So far my html looks like this:
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span><br>
EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span><br>
JUGADORES POR EQUIPO</div>
</div>
And this is my css:
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: inset 0 0 5px #000000;
color: black;
}
.psa-circle-container {
display: inline-block;
text-align: center;
color: white;
padding: 20px;
width: 180px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
margin: 0 20px 20px;
padding-top: 0;
}
Acomplishing this:
I have tried to use the "psa-circle-container" with an inset shadow with no success. I've tried googling shadow effects but i haven't found something like it.
You can use a pseudo element, like ::before
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: 0 0 5px #000000;
color: black;
}
.psa-circle-container {
float: left;
text-align: center;
color: white;
padding: 20px;
width: 120px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
background: steelblue;
height: 170px;
position: relative;
overflow: hidden;
}
.psa-circle-container ~ .psa-circle-container::before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
width: 40px;
left: -45px;
background: transparent;
border-radius: 50%;
box-shadow: 10px 0px 10px rgba(0,0,0,0.4);
}
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span>
<br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span>
<br>EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span>
<br>JUGADORES POR EQUIPO</div>
</div>
You can do this with box-shadow:
.psa-circle-container + .psa-circle-container:before {
content: "";
position: absolute;
top: 25%;
right: 100%;
width: 25%;
height: 50%;
border-radius: 50%;
box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
}
.psa-circle-container + .psa-circle-container:after {
content: "";
position: absolute;
width: calc(25% + 13px);
height: 100%;
top: 0;
left: calc(-25% - 13px);
/* Background color copied from example */
background: #59bbed;
}
This creates two pseudo elements. The first one is the actual shadow. This is done via box-shadow. To make the shadow slightly round, I added a border-radius and made the element an ellipse. All the rest of the stuff in there is positioning it between the containers.
The second element is there to keep the elliptical shadow from looking like a blurry ellipse. All it does is block out part of the shadow, by covering it with the same color as the background. This may not be an ideal solution.
The snippet below shows it all together:
body {
background: #59bbed;
}
.psa-circle {
font-size: 35px;
line-height: 70px;
display: inline-block;
width: 70px;
height: 70px;
background: white;
border-radius: 50%;
margin: 30px;
box-shadow: inset 0 0 5px #000000;
color: black;
}
.psa-circle-container {
display: inline-block;
text-align: center;
color: white;
padding: 20px;
width: 180px;
vertical-align: top;
font-size: 18px;
font-weight: bold;
margin: 0 20px 20px;
padding-top: 0;
position: relative;
}
.psa-circle-container + .psa-circle-container:before {
content: "";
position: absolute;
width: 25%;
height: 50%;
top: 25%;
right: 100%;
box-shadow: 2px 0 15px 1px rgba(0,0,0,0.7);
border-radius: 50%;
}
.psa-circle-container + .psa-circle-container:after {
content: "";
position: absolute;
width: calc(25% + 13px);
height: 100%;
top: 0;
left: calc(-25% - 13px);
background: #59bbed;
}
<div>
<div class="psa-circle-container"><span class="psa-circle">12</span><br>CIUDADES</div>
<div class="psa-circle-container"><span class="psa-circle">3</span><br>
EQUIPOS POR CIUDAD</div>
<div class="psa-circle-container"><span class="psa-circle">18</span><br>
JUGADORES POR EQUIPO</div>
</div>
How can I achieve this shape with CSS:
Ideally, I'd like a background shadow effect too.
You can do this with CSS but it realy isn't the best way to make it. It will need to add unsemantic markup, and probably a lot of CSS.
If you don't want to use an image, I would suggest to use an inline SVG it is much better to control shapes like the one you are trying to achieve.
With SVG:
I made this quick example using a path element with arc commands :
svg{
display:block;
width:30%; height:auto;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}
<svg viewbox="0 0 10 10">
<path d="M4.5 1 A4.05 4.05 0 0 0 4.5 9z M8.4 3 A4.05 4.05 0 0 0 5.5 1 V9 A4.05 4.05 0 0 0 8.4 7"
stroke-width="0.8" fill="transparent" stroke="#000"/>
</svg>
With CSS :
I also made this CSS example with a possible approach if you really want to go with CSS. It uses only one div and two pseudo elements. The lines are made with borders and border-radius :
div {
position: relative;
width: 100px;
padding-bottom: 100px;
border-radius: 50%;
}
div:before,div:after {
box-sizing: border-box;
content: '';
width: 48%;
height: 100%;
position: absolute;
border: 10px solid #000;
}
div:before {
border-radius: 900px 0 0 900px;
}
div:after {
right: 0;
border-radius: 0 35px 35px 0;
border-right-color:transparent;
}
body{background:url('http://i.imgur.com/qi5FGET.jpg');background-size:cover;}
<div></div>
One CSs posibility
.test {
width: 200px;
height: 200px;
border: solid 10px black;
border-radius: 50%;
border-right-color: transparent;
background-image: linear-gradient(90deg, transparent 85px, black 85px, black 115px, transparent 115px);
position: relative;
}
.test:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 10px;
margin: auto;
background-color: white;
top: -10px;
bottom: -10px;
}
<div class="test"></div>
Here is another CSS alternative which just uses a single pseudo element to create the extra side of the shape.
The after creates the extra curve with a partially transparent border (the right side).
body {
background: skyblue;
}
div {
width: 50px;
height: 100px;
border: 10px solid black;
border-radius: 75px 0px 0px 75px;
position: relative;
box-sizing: border-box;
}
div:after {
content: '';
top: -10px;
width: 50px;
height: 100px;
border-width: 10px;
border-style: solid;
border-right-color: transparent;
border-radius: 0px 39px 39px 0px;
position: absolute;
left: 45px;
box-sizing: border-box;
}
<div></div>
I need help with line spacing between text
and a picture just to know what I need:
Here is my CSS:
.popular_courses h3 {
font-size: 20px;
text-align: center;
text-transform: uppercase;
margin-top: 60px;
margin-bottom: 20px;
}
.popular_courses h3 {
border-bottom: 1px solid #ddd;
line-height: 0.1em;
margin: 60px auto 20px;
width: 70%;
}
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
}
I think this is a better way to achieving the desired result instead of adjusting the line height.
.popular_courses h3 {
position: relative;
text-align: center;
}
.popular_courses h3:before {
content: "";
position: absolute;
top: 50%;
left: 15%;
width: 70%;
margin-top: -1px;
height: 2px;
background-color: #ddd;
}
.popular_courses h3 span {
position: relative;
display: inline-block;
background-color: #fff;
padding: 0 20px;
}
<div class="popular_courses">
<h3><span>POPULAR COURSES TITLE</span></h3>
</div>
You have to use padding property for your class around "POPULARNI KURZY".
For eg:
padding: 10px 20px;
will add 10px padding (space) on left and on right sides, and 20px padding on top and bottom sides.
What you need is something like:
padding: 50px 0;
(This will add 50px padding on left, 50px on right and 0 for bottom and top sides).
You can do this:
CSS
.popular_courses {
position:relative;
display: block;
width: 70%;
text-align: center;
margin 0 auto;
z-index:1;
}
.popular_courses:before {
position:absolute;
content:"";
height: 1px;
background: #000;
width: 100%;
z-index:2;
left:0;
top: 50%;
transform: translateY(-50%);
}
.popular_courses h3 {
position: relative;
display: inline-block;
line-height: 0.1em;
background: #fff;
padding: 0px 30px; // -> ADJUST HERE YOUR PADDING NEED
z-index:3;
}
HTML
<div class="popular_courses">
<h3>teste</h3>
</div>
DEMO HERE
Theory
You are looking for the padding option:
// padding: top right bottom left
padding: 1px 2px 3px 4px;
you can also use padding like this:
// padding: top&bottom left&right
padding: 0px 10px;
or with separate statements:
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left:10px;
Practice
if your text is inside the span tag then your css should be like:
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
padding: 0 20px;
}
so that the text will have a 20 pixel padding on both sides!
.heading {
text-align: center;
position: relative;
z-index: 10;
}
span {
display: inline-block;
background: #fff;
padding: 0 10px;
position: relative;
z-index: 10;
}
.heading:after {
content: '';
display: block;
border-bottom: 3px solid #ccc;
width: 100%;
position: absolute;
z-index: 5;
top: 50%;
}
<h1 class="heading">
<span>Some nice heading</span>
</h1>
Hi, If you can manage to cover the background-color of the text like
to white or to the same color of background-color, then this
example can work.
.popular_courses h3 span { padding: 0 15px; }
With this line of code you will put space in the left and right side of the text and it will be filled with white background.
This question already has answers here:
div set height equal
(4 answers)
Closed 8 years ago.
this is my html of my little game.
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
<p>When you are ready, click on <strong>Fight</strong>.</p>
<button id="resulot" onClick="resulte()">Fight!</button>
</div>
<div id="clear"></div>
</div>
And this is my CSS
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
#rock {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/rock.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#paper {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/paper.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#scissors {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/scissors.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#result {
background-color: #ECECEC;
border:2px solid gray;
border-radius:25px;
width: 200px;
height: 100px;
}
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float: left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
display: block;
overflow: auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100%;
float: right;
}
#clear {
clear: both;
}
You can check it out here on http://jsfiddle.net/RWfhQ/ . I want to make the blue div to be same size as the red one. I want to make them same size. It's possible that blue div may get bigger than red one, so I need to have them same size.
Thank you very much.
The obvious solution is to use position: relative on #game container and position: absolute on #confirm:
#confirm {
...
position: absolute; // <-- stretch the div
top: 0;
bottom: 0;
right: 0;
}
In this case you don't need height: 100% and float: right anymore.
http://jsfiddle.net/RWfhQ/1/
Since this is a fixed width, you could use the faux-columns trick. Wrap both in a <div> to handle the background, and use a background image which is half blue and half red.