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>
Related
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%);
}
I am trying to create a navbar with a gradiented background as shown in the image below
How can I create the gradient in the red box in this image
This is a sample CSS class for using gradients.
#gradient {
height: 50px;
opacity: 0.2;
background-color: transparent;
background-image: linear-gradient( black, white);
}
You can tweak the opacity for shadows accordingly.
Your code:
div {
background-image: linear-gradient(black, white);
height:60px;
position:fixed;
top:0px;
width:100%;
border:2px solid black;
text-align:center;
}
There you go:
div {
background-image: linear-gradient(grey, white);
height:60px;
position:fixed;
top:0px;
width:100%;
border:2px solid black;
text-align:center;
}
<div><h1>My Youtube Channel</h1></div>
A completely working example!
You'll want to use linear-gradient.
background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
This is rgba black full opacity (1) to rgba black 0 opacity. If you want it to be lighter you can set the first rgba to something like rgba(0,0,0,0.5), black half opacity (0.5).
I'm looking to create a styled button for my app. The hope is to use css to generate a button which looks similar to:
The blue comes from the background so it's not relevant, its the shades of green I'm interested in. I'm not sure first if its possible to do it with CSS or how to do it if it is possible.
Can you start a gradient in the top left corner, move into a different colour from there and finish with a final colour at the bottom of the gradient?
If so are there any examples that you know of which I can refer too?
You can do this easily enough with a CSS-gradient using color stops. Here's a snippet example:
.gradientButton {
height: 50px;
width: 100px;
line-height:50px;
vertical-align:middle;
text-align:center;
font-family:arial;
font-size:26px;
font-weight:bold;
color:white;
text-shadow:2px 2px #336633;
box-shadow:2px 2px #336633;
border: 1px solid black;
border-radius:12px;
background: linear-gradient(to bottom right, LawnGreen 15%, green 85%, DarkGreen 90%);
}
.gradientButton:hover {
text-shadow:1px 1px #336633;
box-shadow:1px 1px #336633;
background: linear-gradient(to bottom right, LawnGreen 5%, green 80%, DarkGreen 85%);
}
<html>
<body>
<div class="gradientButton">log in</div>
</body>
</html>
Using things like gradients and shadows you can even provide hover effects like I've done here making it look like the button's depressed when you hover over it.
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Triangle in CSS inside a box [closed]
(1 answer)
Closed 8 years ago.
I have this issue, I can't figure out how I can make the the arrow transparent.
So basically I just use :after to make a border with these values to make an arrow.
But what I would like is to make the arrow transparent so you could see the background image, which is a background image in the header tag.
The CSS:
html,body {
width:100%;
height:auto;
font-family:'open-sans', sans-serif;
}
header {width:100%;}
main {
width:100%;
min-height:50vh;
position:relative;
}
main:after {
top:0;
left:50%;
border:solid transparent;
content:"";
height:0;
width:0;
position:absolute;
border-color: rgba(0, 0, 0, 0);
border-top-color:#2a2a2a;
border-width:60px;
margin-left: -60px;
}
The HTML:
<header class="bg__header">
</header>
<main>
<article></article>
</main>
Fiddle
And here a golden example of what I want to achieve:
This can be done but will require some extra pseudo elements. You need to reverse your logic a little and make the arrow "cut out" the background as CSS arrows are achieved using borders and can't have background images.
Make .bg__header position: relative; to ensure the pseudo elements are positioned relatively to it.
Add .bg__header:before and .bg__header:after, these will provide the white borders left and right of the transparent arrow.
Amend main:after to make the arrow transparent and the sides white.
You've got quite a bit of code in your fiddle so for simplicity sake these are the changes:
.bg__header {
position: relative;
}
.bg__header:before {
content:"";
background-color: white;
height: 60px;
position: absolute;
bottom: 0;
width: 50%;
left: -60px;
}
.bg__header:after {
content:"";
background-color: white;
height: 60px;
position: absolute;
bottom: 0;
width: 50%;
right: -60px;
}
main:after {
border-color: white;
border-top-color: transparent;
top: -60px;
}
JS Fiddle: http://jsfiddle.net/2pjxfs4n/2/
You can do this in another way. First of all, you do not need the this one rule
border-color: rgba(136, 183, 213, 0);
as it is not changing anything.
Inspite of using transparent option to your border present value of the border-top-color in rgba and use alpha chanel like this
border-top-color:rgba(42,42,42,0.4);
hope this will work for you
Not sure this is what you want.had set some width and height to the main:after and had rotated it so that it looks like an arrow
Modified main:after like this
main:after {
/*ARROW on header tag*/
top:-50px;
left:50%;
height:60px;
width:60px;
content:"";
position:absolute;
margin-left: -60px;
-webkit-transform:rotate(45deg);
border-bottom:solid 1px black;
border-right:solid 1px black;
}
CODE
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/