This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed last month.
I am trying to draw curve in html and css. I tried but not able to draw it correctly, Could someone please help me. I will attach a picture which I am trying to achieve.
Thanks
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
HTML
<span class="styling">Ali Haider</span>
CSS
.styling {
border:none;
background:green;
color:white;
padding:15px 40px;
text-transform:uppercase;
cursor:pointer;
clip-path: polygon(0 0, 100% 1%, 80% 100%, 0% 100%);
}
Related
This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 2 years ago.
I need a 30 degree cut at the right bottom and i tried below .
It does not produce exact 30 degree for different text inputs .Could some one help on that
html code:-
<div class="cut-corner">
<p>Stay in the moment. Make every customer matter.</p>
</div>
css code:-
css:-
p {
background: none;
box-shadow: none;
margin: 0;
padding: 0;
color: #color-primary;
z-index:2;
#media #medium {
color: #fff;
font-size: 40px;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 3px;
max-width:50%;
margin-bottom: 10px;
display: inline-block;
padding:30px 50px 30px 40px;
}
}
.bottom-right {
p {
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 75%,90% 100%);
}
}
1> if the text is "Stay in the moment. Make every customer matter."
Then the corner is about 39 degree
2> if the text is "Stay in the moment. "
Then the corner is about 23 degree
Thanks
That's because % are used, which depend on the width and height of the element. This can simply be fixed by using a fixed values, like px.
clip-path: polygon(0 100%, 0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%);
I'm using the calc() function in this example because both clip-points start at 100%, for example 75% & 90% were used before, but since I don't know the total width of the element in pixels I simply subtract (24px in this example) from 100%.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have the design and the client wants to make the button only with CSS
I found a few ways to do it but it's not the same.
And I can't improve to a perfect copy.
you may use pseudo-elements and draw background from their shadow, example:
a {
margin:3em;
font-family:arial;
text-decoration:none;
position:relative;
display:inline-block;
padding:1.5em 5em;
text-transform:uppercase;
overflow:hidden;
color:white;
border:3px solid white;
border-left:none;
border-right:none;
background:linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) top left no-repeat,linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) bottom left no-repeat;
background-size:100% 1.45em;
}
a:before,a:after {
z-index:-1;
content:'';
position:absolute;
height:1.2em;
width:1em;
top:1.4em;
border-radius:50%;
border:3px solid white;
box-shadow:0 0 0 10em #102229;
}
a:before {
left:-0.7em;
}a:after {
right:-0.7em;
}
b:after {
content:'>';
color:#DA153E;
font-weight:bold;
}
body {
background:url(http://lorempixel.com/600/300);
}
<b>get a free quote </b>
I am wondering how it is possible to create the following effect using only CSS:
Desired output :
Currently, all I can think of is adding a border around the image. But how can I cut them and make sections out of them around the image?
This is my current CSS:
.avatar img {
border-radius: 50%;
border: solid 3px #65C178;
border-width: 4px;
}
And HTML:
<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>
Preview: JSFiddle Example
This only gives a border around the avatar image, not the green sections with white spacings.
DEMO
Output :
Explanation
Creating the borders
Use borders with border-radius to create the borders.
step 1
Then transform rotate to make the left top border appear at the right place.Step 2 (don't forget to "unrotate" the image by rotating it the other way so it stays vertical)
The white spaces
Use pseudo elements to create the white spacings at the bottom and the right of the image. step 3
Unless you have very special requirements for browser support, you can remove the vendor prefixes for the border-radius property. Check canIuse for more info.
CSS :
.avatar{
border: solid 4px #54BE69;
border-left-color:#D5EDDA;
padding:2px;
display:inline-block;
border-radius: 50%;
position:relative;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.avatar img{
display:block;
border-radius: 50%;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.avatar:before, .avatar:after{
content:'';
position:absolute;
background:#fff;
z-index:-1;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.avatar:before{
height:4px;
top:50%;
left:2px; right:-5px;
margin-top:-2px;
}
.avatar:after{
width:4px;
left:50%;
top:2px; bottom:-5px;
margin-left:-2px;
}
Here you have an example with sass.. (quickly Googled)
http://codepen.io/geedmo/pen/InFfd
EDIT: As requested in comments here's a little improvement with some quick tweaks to that codepen
SASS DEMO LINK
SASS:
// Colors
$progressColor: #65C178
$pendingProgressColor: #D5EDDA
$backColor: #fff
/* -------------------------------------
* Avatar img
* ------------------------------------- */
.avatar img
border-radius: 50%
border: solid 3px #fff
border-width: 3px
margin-top: 4px
margin-left: 4px
/* -------------------------------------
* Progress Bar
* ------------------------------------- */
.progress-radial
float: left
margin-right: 30px
position: relative
width: 142px
height: 142px
border-radius: 50%
border: 2px solid $backColor // remove gradient color
background-color: $progressColor // default 100%
/* -------------------------------------
* Mixin for progress-% class
* ------------------------------------- */
$step: 5 // step of % for created classes
$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
#for $i from 0 through $loops
.progress-#{$i*$step}
#if $i < $half
$nextdeg: 90deg + ( $increment * $i )
background-image: linear-gradient(90deg, $pendingProgressColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
#else
$nextdeg: -90deg + ( $increment * ( $i - $half ) )
background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent), linear-gradient(270deg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)
For the separator of the progress sections another mixin could be included
here is a solution: jsfiddle
CSS
.avatar img {
border-radius: 50%;
border-width: 4px;
padding: 4px;
background-image: linear-gradient(-90deg, #65C178 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, #65C178 50%, rgba(0, 0, 0, 0) 50%);
}
HTML
<div class="avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" />
</div>
Note: change the deg value in the second linear-gradient to change the percentage filled.
We cant get the exact like your image. But something we can get it. Add the following line of code in your css.
border-top-color:#ff00ff;
border-bottom-color:#0000ff;
border-left-color:#00ff00;
border-right-color:#000;
Updated jsfiddle below.
http://jsfiddle.net/vz964/1/
Below is an image of a button we use on our site, it's a .png.
We'd like to see if we can get really close to it with CSS on a standard button.
The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.
Is that even possible in CSS?
I'll get ya started...
HTML
<button>Submit</button>
CSS with some background gradients
#import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
DEMO
Screenshot:
If you want some kind of clicky feedback type look on click, you could also add:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
DEMO w/ :active
This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.
Here is the cross-browser version using css gradient.
I specified 4 colors for the gradient.
The first gradient from 0 to 50% and the second gradient from 51% to 100%.
Ex.
background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);
jsfiddle demo here
Please note that the red i took are brighter than in tour example.
Just play with the css to adjust colors that fit your needs.
I'm trying to do something like this for a client who has a blog.
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
Well if you want fully transparent than you can use
border: 5px solid transparent;
If you mean opaque/transparent, than you can use
border: 5px solid rgba(255, 255, 255, .5);
Here, a means alpha, which you can scale, 0-1.
Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.
For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.
Demo
Demo 2 (With a background image for nested div)
Demo 3 (With an img tag instead of a background-image)
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.
You can also use border-style: double with background-clip: padding-box, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
For example:
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
Using the :before pseudo-element,
CSS3's border-radius,
and some transparency is quite easy:
LIVE DEMO
<div class="circle"></div>
CSS:
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
The :before attaches to our .circle another element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
use rgba (rgb with alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)