I saved the image as a transparent png but nothing I can do seems to fix it!?! Any ideas???
It should look like this:
Here is a copy of the image in GIMP showing that it's indeed transparent:
finally, Some good old code:
The Markup:
<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form>
Search Box CSS:
.search, .search:active, .search:focus, .search:visited {
position: absolute;
color: #fff;
top: 3px;
width: 368px;
right: 9%;
font-size: 28px;
z-index: 3;
border-radius: 20px;
/* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */
text-indent: 10px;
text-shadow: 0px -2px 3px rgba(0, 0, 0, .7);
background-color: #00D4C7;
}
The Search icon css itself:
Pseudo ::before element
.search:before {
content: "";
position: absolute;
top: 7px;
left: 268px;
background-image: url("images/icon-search.png");
background-color: rgb(0, 185, 171);
width: 46px;
height: 30px;
z-index: 4;
}
Note: If I remove the class search from form, It removes my image, if I remove class search from the input element it still renders with that funky shade over my image...Any ideas?
Edit 1: If I do as suggested by setting the explicit dimensions of the image (as I did for other pseudo elements with no problem) it does not resolve my issue. I've already submitted the project so at this point it's a matter of me wanting to know what happened and how I can fix this. I resorted to a css hack that changed the brightness to a closer match [with a faint outline still 😞 ]
Edit 2: Show me the JS Fiddle!
you did give your image a background-color: rgb(0, 185, 171); what is #00b9ab
and the searchbox background-color: #00D4C7; what is rgb(0, 212, 199)
My image itself was not truly transparent. There is is a small opacity channel that causes that grey haze to appear on a non-white background. I caught wind of this when posting to imgur....and confirmed it for sure when I actually made a copy of the layer (in photoshop) using select by color.
Solution: Check your images...to do this, load it onto a window by itself and set the html body to a non-white color. Wish I thought to do this before submitting this:
This might be happening because your background image size is different than its container's, .search::before, size. And/or because your .search::before background-color is a different hex value.
Try this:
Add background-color: transparent; and background-size: 46px 30px; to .search::before. This will make it so that if your background image is smaller than the container, the rest of the space will be transparent and set the background image size to be the same as its container, which you have explicitly set.
I found that the images that I was getting from the internet were not truly transparent. This website enabled me to get it to work. https://www.remove.bg/ (the image I used had the checkered background to indicate it was transparent, it just didn't work in the img tag until I used that website.)
I want to apply the same gradient to the triangle (class="triangle-right") as the rectangle (class="fillblue"). I have seen some other examples but they are not working for me. Combining both shapes and using a single class would be awesome too!
JS FIDDLE HERE!
CSS:
.fillblue {
background: rgb(208,228,247); /* Old browsers */
background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7',
endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */
height: 40px;
width: 100px;
display: inline-block;
float: left;
color: white;
text-align: center;
line-height: 40px;
font-weight: bold;
}
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 40px solid lightblue;
border-bottom: 20px solid transparent;
float: left;
}
HTML:
<div class="fillblue">Step 1</div><div class="triangle-right"></div>
Part 1: Giving the triangle a gradient
The easiest way to achieve this would be to invert your triangle. and extend the length of the element with the gradient.
JSFiddle demo.
Inverting the triangle
Rather than giving the border-left on the triangle a solid colour, you want to give the top and bototm borders the colour (in this case we want to match the background colour, so lets make these white as that's the JSFiddle background colour):
.triangle-right {
...
border-top: 20px solid white;
border-left: 40px solid transparent;
border-bottom: 20px solid white;
}
If you're unsure what this achieves, here is an example of the triangle when the top and bottom borders are set to red instead of white:
Increasing the width of your gradient element
As your triangle is 40px wide, we need to increase the width of our gradient element by 40px. For this I've used padding to ensure the text remains in the same place:
.fillblue {
...
padding-right: 40px;
}
With the same red triangle we used above, this is what it now looks like:
Positioning the inverted triangle on top of our gradient element
Now we simply need to set a negative margin on our inverted triangle to make it appear on top of our gradient element:
.triangle-right {
...
margin-left: -40px;
}
Finally, using the red triangle again, our finished result looks like this:
Part 2: Combining both shapes into one element
To do this we can make use of the :after pseudo-element.
JSFiddle demo.
First off, lets modify our HTML:
<div class="fillblue">Step 1</div>
Now lets give our .fillblue element relative positioning. We do this so that we can absolutely position our triangle in the next step:
.fillblue {
...
position: relative;
}
Now we modify our previous .triangle-right styling to use this :after pseudo-element instead:
.fillblue:after {
width: 0;
height: 0;
border-top: 20px solid white;
border-left: 40px solid transparent;
border-bottom: 20px solid white;
}
Finally we give it the new properties to position it correctly and actually make it display:
.fillblue:after {
...
content: '';
position: absolute;
top: 0;
right: 0;
}
I wanted to suggest using border-image: linear-gradient(...); but then I looked up https://developer.mozilla.org/en-US/docs/Web/CSS/border-top and saw that it's not possible to apply a border-image to just 1 of the borders, and then make the other borders transparent. There's also no border-left-image, so that won't work either. Since border-image is a relatively new addition to CSS (it's part of CSS3), it's not integrated in CSS as well as the other border styles. That's why doing this with borders is not possible. (It looks like this (simple webkit-only demo) if you do try to add a border-image, and then try to override it with transparent borders - it doesn't work)
Assuming you want to keep using borders to create your triangle, I would say this is not possible.
The only way you could make it work then is by changing the div to a square that's got a diagonal gradient, and is rotated 45 degrees via CSS transforms. That would end up being something like this:
.triangle-right {
display:inline-block;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */
/* etc. */
width:28px; /* ~ sqrt(2*40^2)/2 */
height:28px;
-webkit-transform: rotate(45deg);
/* etc. */
margin-top:6px;
margin-left:-14px;
}
Demo
Keep in mind that that is probably not the best solution, since it'd rely purely on transforms, which are not supported in every browser, and there are no good fallbacks for it. It does have one advantage over James Donnely's solution, which is that it keeps its soft borders instead of becoming jagged.
It does have other significant downsides though, namely that you're relying on fixing its position with transform and margin. It is possible other browsers don't handle this exactly the same as Chrome does, and therefore show your triangle differently. They should all show it the same way, but there's always a chance some browser decides to do things slightly differently.
Explanation of the code: The /* etc. */ stands for the other browser prefixes, the width and height are 28px because that's the height of the rotated square, its diagonal length (sqrt(width^2 + height^2)). This is also the reason the margin-left needs to be -14px (half of this diagonal length): it needs to move 14 pixels to the left, so that its corner is moved over the .fillblue element.
As was asked below in the comments, it is also possible to scale the triangle to be wider (or slimmer). This can be done by simply changing the transformation to scale(2, 1) rotate(45deg) so that it applies the stretching and rotating in the right order. A demo of this can be found at http://jsfiddle.net/x61Lyar0/2/.
PS: If you want your arrow to be less pointy, you can apply border-radius: 0 2px 0 0; (or border-top-right-radius: 2px) to smooth it out just a little bit.
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.
I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me.
As this is quite old now, I feel it could use with some new updated answers with some new technologies.
CSS Transform Perspective
.trapezoid {
width: 200px;
height: 200px;
background: red;
transform: perspective(10px) rotateX(1deg);
margin: 50px;
}
<div class="trapezoid"></div>
SVG
<svg viewBox="0 0 20 20" width="20%">
<path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>
Canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<canvas id="myCanvas" width="200" height="200"></canvas>
You can use some CSS like this:
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div id="trapezoid"></div>
It is really cool to make all this shapes, Take a look to more nice shapes at:
http://css-tricks.com/examples/ShapesOfCSS/
EDIT:
This css is applied to a DIV element
Simple way
To draw any shape, you can use the CSS clip-path property like below.
You can use free online editors to generate this code (ex: https://bennettfeely.com/clippy/)
.trapezoid {
clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}
With reusable code
If you want it more adaptative, you can define a Sass mixin like :
#mixin trapezoid ($top-width, $bottom-width, $height) {
$width: max($top-width, $bottom-width);
$half-width-diff: abs($top-width - $bottom-width) / 2;
$top-left-x: 0;
$top-right-x: 0;
$bottom-left-x: 0;
$bottom-right-x: 0;
#if ($top-width > $bottom-width) {
$top-left-x: 0;
$top-right-x: $top-width;
$bottom-left-x: $half-width-diff;
$bottom-right-x: $top-width - $half-width-diff;
} #else {
$top-left-x: $half-width-diff;
$top-right-x: $bottom-width - $half-width-diff;
$bottom-left-x: 0;
$bottom-right-x: $bottom-width;
}
clip-path: polygon($top-left-x 0, $top-right-x 0, $bottom-right-x $height, $bottom-left-x $height);
width: $width;
height: $height;
}
And then use it for the desired element like this (here parameters are $top-width, $bottom-width, $height) :
.my-div {
#include trapezoid(8rem, 6rem, 2rem);
}
This is an old question... but I want to add a method that has not been mentioned. It is possible to draw triangles with gradients of half color half transparent, and then it is possible to build a trapezoid from 3 gradient shapes. Here is an example code, the 3 blocks drawed in different colors for better understanding:
#example {
width: 250px;
height: 100px;
background-image:
linear-gradient(to top left, red 0 50%, transparent 50% 100%),
linear-gradient(to top right, green 0 50%, transparent 50% 100%),
linear-gradient(blue 0 100%);
background-size:
20% 100%, 20% 100%, 60% 100%;
background-position:
left top, right top, center top;
background-repeat: no-repeat;
}
<div id="example"></div>
You have a few options available to you. You can just plain use an image, draw something with svg or distort a regular div with css transforms. An image would be easiest, and would work across all browsers. Drawing in svg is a bit more complex and is not guaranteed to work across the board.
Using css transforms on the other hand would mean you'd have to have your shape divs in the background, then layer the actual text over them in another element to that the text isn't skewed as well. Again, browser support isn't guaranteed.