How can I make a div in HTML and apply a gradient background like in the picture:
I have tried some js-fiddle snippets but was unable to do some thing like this in the image it will be used in a pricing table for displaying latest discounts. The other alternate I have is to use the hard quote the image in my pricing table.
http://www.hongkiat.com/blog/css-gradient-border/
I tried the above link and applied border-radius:50% but didn't got the desired result.
Border images are not yet well supported, so I think you need to use two containers with one being styled with background: linear-gradient():
https://jsfiddle.net/nsvn00px/
<div class="circle">
<div class="circle__inner"></div>
</div>
CSS:
.circle {
position: relative;
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(to right, red, green);
}
.circle__inner {
position: absolute;
width: 46px; height: 46px;
top: 2px; left: 2px;
border-radius: 50%;
background-color: white;
}
This can also be done within one container with the use of pseudo classes, but I think this should give you a better idea how it works.
Related
I'm writing here because I've got a problem with CSS. I have a .container div that contains another div set to position:absolute, top:0, left:0 and width:100%; height:100%. However I keep seeing these kind of white spaces, that when I zoom in the page disappear. Any solution?
.loop {
display: block;
position: absolute;
height: 36px;
background: white;
border: 2px solid black;
box-sizing: border-box;
width: 250px;
top: 7px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
overflow: hidden;
transition: background 0.2s;
}
.goPrev,
.goNext {
position: absolute;
width: 36px;
height: 100%;
box-sizing: border-box;
top: 0;
display: flex;
justify-content: center;
}
.goMid {
position: absolute;
top: 0;
left: 36px;
width: calc(100% - 72px);
height: 100%;
font-family: "Poppins";
padding-top: 9px;
text-align: center;
box-sizing: border-box;
}
.goMid:hover,
.goPrev:hover,
.goNext:hover {
background: rgba(0, 0, 0, 0.3);
}
<body>
<div class="loop">
<div class="goPrev">
</div>
<div class="goMid">
Help me.
</div>
<div class="goNext">
</div>
</div>
</body>
That is just a draw.
Here you have the screenshot
Well, I'm not totally sure what to do, but the following changes seem to fix the problem for me. I changed:
Set .loop overflow from hidden to visible
Set .goMid top from 0 to -1px
The .goMid height from 100% to calc(100% + 2px)
When I moved the inner div underneath the border using top: -5px I still saw the whitespace until I changed the outer div overflow property to visible. Then if you stretch the inner div a little it seems to solve the problem. It helps that your outer div has a thick border.
.loop {
display: block;
position: absolute;
height: 36px;
background: white;
border: 2px solid black;
box-sizing: border-box;
width: 250px;
top: 7px;
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
/* HERE */
overflow: visible;
transition: background 0.2s;
}
.goPrev,
.goNext {
position: absolute;
width: 36px;
height: 100%;
box-sizing: border-box;
top: 0;
display: flex;
justify-content: center;
}
.goMid {
position: absolute;
/* HERE */
top: -1px;
left: 36px;
width: calc(100% - 72px);
/* HERE */
height: calc(100% + 2px);
font-family: "Poppins";
padding-top: 9px;
text-align: center;
box-sizing: border-box;
}
.goMid:hover,
.goPrev:hover,
.goNext:hover {
background: rgba(0, 0, 0, 0.3);
}
<body>
<div class="loop">
<div class="goPrev">
</div>
<div class="goMid">
Help me.
</div>
<div class="goNext">
</div>
</div>
</body>
For what it's worth, I think #MarkP may have a good point. Combining absolute positioning and flexbox does feel like maybe a code smell. But, I don't know what the context is in your code and my flexbox-fu is a little shaky.
ACTUAL GENERATED VIEW:
I added text to all 3 nested divs and got the following centered display.
You can see all your text is bunched together. I am going to review your code and the offer a way forward. You may find you need to re-word your problem to allow us to help you better. My assumption is you are trying to set-up a tool to navigate through some type of media, such as images or pages.
CODE REVIEW
In review of your Code i can see you are trying to use a 3 part display using flexbox. Except you have also included absolute positions which prevents relative display of the divs alongside each other. Now i know you are concerned about white space but i am going to suggest a way to better use flex-box as well as debugging the whitespace, although it would be better to start again with a appropriate flexbox structure.
WHITE SPACE DEGUGGING
My suggestion first would be to remove CSS that could be causing this and then re-introduce the CSS progressively. If you are using Google Chrome you can use the insight tool to adjust the live CSS. Simply right-click on the area you wish to inspect and the CSS being used there will be displayed. You can edit directly in the CSS display and it will change the page behaviour, this is great for debugging and seeing what CSS improves your layout. Once you find the CSS you need you can replicate that in your code.
I would start with removing the following and see how you go:
Remove overflow:hidden;
When you look closer you can see the style code allows for 36px for each div on the left and the right. There may be an image missing from the .goPrev and .goNext divs, where your white space is now. Not sure if you copied your code from somewhere or wrote this from scratch?
TRY STARTING WITH A NEW FLEX-BOX STRUCTURE
I recommend creating your divs from scratch using one of the approaches found here: Common CSS Flexbox Layout Patterns with Example Code . Flexbox is super simple and a great way to build mobile responsive layouts.
I have a rectangular sprite image that is 120px x 40px. When someone select the image I want the right side of the selected image to turn into an arrow pointing right.
I know how to use border-radius but that gives a curves whereas I want a point.
Using css how would I turn the right side of an image into a arrow?
Thanks
Basically I want to perform a border-radius only on the right side, but instead of curved pointed like an arrow.
.selected {
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}
If you can keep the white background here is a very simple solution:
jsFiddle here
Run the image in the background of the following example.
HTML
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
CSS
.container {
background: #333;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.container:hover::after {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
top: -20px;
right: -20px;
z-index: 1;
transform: rotate(45deg);
}
.container:hover::before {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
bottom: -20px;
right: -20px;
z-index: 1;
transform: rotate(-45deg);
}
I do not know, i understood your question, but i think, what you want to achive, can be done by jQuery and css function with background-position
Basically, if you want to use a CSS Sprite image, background-position will indeed do it.
You may want to have a <div> positionned over your image, that will be displayed on hovering (CSS :hover) or click (jQuery click event) the image, depending on what you meant by "selecting" it.
Here is an example for hovering case (pure CSS) and here is an example for the clicking case (with 3 lines of jQuery).
having some CSS difficulties and hoping someone can help me out.
I am trying to get the navbar to expand out on both sides of the page (filled with a solid color), but have a transparent space where I can squeeze in my logo (as seen in the image below).
My page background is an image, so I can't just fill the {Logo} cell, with a bg colour - If it helps at all, I am also using Twitter Bootstrap.
Please can someone help me out with this. Been stuck for a a while now. :S
I was referring to something like this in my comment http://jsfiddle.net/slash197/Eh2xL/1/ This is just a proof of concept, you need to change the values and sizes.
HTML
<div class="bg">
<div class="nav">
<div class="logo">Logo</div>
</div>
</div>
CSS
body, html {
height: 100%;
}
.bg {
background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top;
width: 100%;
height: 100%;
padding: 30px 0px;
}
.nav {
background: url("http://slashwebdesign.net/nav.png") no-repeat center top;
height: 35px;
}
.logo {
margin-left: 100px;
color: #ffffff;
}
Maybe you could do something like this (no image needed, just pure css) :
http://jsfiddle.net/Jh4ya/6/
You have the right side of your navbar positioned as absolute :
#right {
left: 250px;
right: 0px;
position: absolute;
height: 30px;
background: #469;
top: 0px;
}
I think it is one of the most cleanest way to do it. Hope it helps
EDIT :
It may faces some widths issues. As a workarround, you could use display: table-cell; and display: table; properties. See this fork : http://jsfiddle.net/qxVce/
As shown below, how to create with css to which if users save the image to his/her machine image should be square and full width and height as original picture.
You can achieve this effect by setting the border radius of the image container, and applying a hidden overflow value. An example is here - http://jsfiddle.net/8jbD5/1
your html would be something like:
<div id="imgCont">
<img src="theimage.jpg" />
</div>
and the css:
#imgCont{border:8px solid #f00;border-radius:50%;overflow:hidden;width:200px;height:200px}
#imgCont img{width:100%;height:100%;}
I hope this helps...
See this example: http://dabblet.com/gist/5450624 (Tested on Firefox 20/Chrome).
I used a 400x400 jpg image and I've adjusted its top/left offset.
relevant CSS
div {
position: relative;
width: 0;
height: 0;
border: 180px silver solid;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
}
figure {
position: absolute;
top: -120px;
left: -180px;
width: 200px;
height: 200px;
border: 10px red solid;
overflow: hidden;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
}
img {
position: absolute;
z-index: 1;
left: -100px;
top: -100px;
}
Markup
<div>
<figure>
<img src="...">
</figure>
</div>
Sample Output
You have a few choices.
Firstly, you could have an element (say a div) with its background image as your original image. Then inside that div you had an image with part transparency for the inside of the inner circle, so that the original image shows through underneath.
Secondly, you could do similar to above, but instead of using a transparent image you could create circles using a mixture of CSS and HTML. There's some nice demos here.
Thirdly, and probably the most hacky way, would be to just put everything in to one image (like in your question) and use .htaccess to serve a different file on direct access. You may not get very reliable results though. Here's a nice SO answer which explains.
It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border, etc.)
I would like to apply that circle or square over something else (like an image or something) and the middle part should be hollowed out, so you can see the image beneath the square or circle.
I would prefer for it to be mainly CSS + HTML.
Try This
div.circle {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;
}
div.square {
border: solid 21px #f0f;
width: 50px;
height: 50px;
}
<div class="circle">
<img/>
</div>
<hr/>
<div class="square">
<img/>
</div>
More here
You can use special characters to make lots of shapes. Examples:
http://jsfiddle.net/martlark/jWh2N/2/
<table>
<tr>
<td>hollow square</td>
<td>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</td>
</tr>
</table>
Many more can be found here: HTML Special Characters
i don't know of a simple css(2.1 standard)-only solution for circles, but for squares you can do easily:
.squared {
border: 2px solid black;
}
then, use the following html code:
<img src="…" alt="an image " class="squared" />
If you want your div to keep it's circular shape even if you change its width/height (using js for instance) set the radius to 50%. Example:
css:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
html:
<div class="circle"></div>
Circle Time! :) Easy way of making a circle with a hollow center : use border-radius, give the element a border and no background so you can see through it :
div {
display: inline-block;
margin-left: 5px;
height: 100px;
border-radius: 100%;
width:100px;
border:solid black 2px;
}
body{
background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
background-size:cover;
}
<div></div>
To my knowledge there is no cross-browser compatible way to make a circle with CSS & HTML only.
For the square I guess you could make a div with a border and a z-index higher than what you are putting it over. I don't understand why you would need to do this, when you could just put a border on the image or "something" itself.
If anyone else knows how to make a circle that is cross browser compatible with CSS & HTML only, I would love to hear about it!
#Caspar Kleijne border-radius does not work in IE8 or below, not sure about 9.
Shortly after finding this questions I found these examples on CSS Tricks: http://css-tricks.com/examples/ShapesOfCSS/
Copied so you don't have to click
.square {
width: 100px;
height: 100px;
background: red;
}
.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
<div class="square"></div>
<div class="circle"></div>
There are many other shape examples in the above link, but you will have to test for browser compatibility.
In case of circle all you need is one div, but in case of hollow square you need to have 2 divs.
The divs are having a display of inline-block which you can change accordingly. Live Codepen link: Click Me
In case of circle all you need to change is the border properties and the dimensions(width and height) of circle. If you want to change color just change the border color of hollow-circle.
In case of the square background-color property needs to be changed depending upon the background of page or the element upon which you want to place the hollow-square. Always keep the inner-circle dimension small as compared to the hollow-square. If you want to change color just change the background-color of hollow-square. The inner-circle is centered upon the hollow-square using the position, top, left, transform properties just don't mess with them.
Code is as follows:
/* CSS Code */
.hollow-circle {
width: 4rem;
height: 4rem;
background-color: transparent;
border-radius: 50%;
display: inline-block;
/* Use this */
border-color: black;
border-width: 5px;
border-style: solid;
/* or */
/* Shorthand Property */
/* border: 5px solid #000; */
}
.hollow-square {
position: relative;
width: 4rem;
height: 4rem;
display: inline-block;
background-color: black;
}
.inner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: white;
}
<!-- HTML Code -->
<div class="hollow-circle">
</div>
<br/><br/><br/>
<div class="hollow-square">
<div class="inner-circle"></div>
</div>