Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm currently having trouble finding an example for what i'm specially looking for. I am trying to create a circle around my text using CSS. I've found examples of a circle with the text inside, but in this instance i'm trying to create a circle surrounding the text.
An example of what i'm trying to create:
Try using border-radius: 50% to turn any block element like a div with an equal height and width into a circle.
.circle {
height: 2em; /* just an example size */
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
}
To center the text within the circle, you may want to use flexbox properties on the element as well, though this is not the only way you could achieve that.
.circle {
height: 2em;
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to recreate the following background in CSS:
Each hexagon should have navigation link inside (6 sections) and this background with nav links should follow the user through all sections in one-page (displaying on the right side of browser). Currently, I am using it as a background image with fixed position attribute and all works well but the only way to display links for me is to place them in fixed width container on fixed width background image.
I know about clip-path, SVG but it is not supported in all browsers so my question is what is the best way to recreate the following background while maintaining RWD and ensuring each link will be placed exactly in the center of the hexagon?
Have you looked into this website yet? Explains basically step by step how to create hexagons out of a 100x100 div using CSS3.
The idea is that a hexagon basically exists out of 3 HTML divs.
One for the top triangle part, one for the mid square section and one for the bottom triangle part.
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
You can easily put hexagons next to each other to form a hexagon row.
To tile the hexagons you need to add the following CSS3 to the hexagon div.
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
For all the even hexagon rows use a margin-left of 53px.
.hex-row.even {
margin-left: 53px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
in the following code <span> has an image which I want to re-size. Also, wrapper should take the height of the resized image instead it takes the size of the original image. Also this problem is only happening in firefox.
HTML
<div class="wrapper">
<label> India </label>
<span class="visa visa01"></span>
</div>
CSS
.wrapper {
width: auto;
border-radius: 3px;
background: #dadada none repeat scroll 0% 0%;
padding: 2px 10px;
display: inline-block;
float: left;
}
label {
display: inline-block;
max-width: 100%;
}
.visa {
width: 1.6em;
top:1px;
position: relative;
}
.visa01 {
content: url("/images/waww/resume/visa01.png");
}
.visa01:after {
position: relative;
top: 25px;
width: 70px;
height:50px;
display: inline-block;
transform: scale(0.4);
content: url("/images/waww/resume/visa01.png");
}
Any idea how to make the height of the wrapper as the new height of the visa01.
At first glance the issue is due to the transform property. I'm not sure why you are utilizing a transform property when declaring a static height and width. Try omitting the transform in place of a manually adjusted height and width (since you were statically declaring these anyhow) and you may no longer have this issue where the original image "container" so to say is getting set dimensions, yet then being transformed afterwards (and the new dimensions now picked up by the wrapper).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm currently trying to find out how to make the title be completely centered on my webpage both vertically and horizontally on all webpages/not dependent on the screen size. I am currently using <br> tags.
Here is what I want it to look like
but when resized, I want it to change font size and stay centered.
You may be able to use viewport units.
<h1 style="font-size: 30vh;"> Zakaria Ridouh </h1>
Ref: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
U can try this one:
Remove Width:50%;
#intro
color: white;
/* width: 50%; */Remove this one
background: rgba(0, 0, 0, 0);
If you are trying to center an element both vertically and horizontally, try this:
HTML:
<div class="wrapper">
<h1>title here</h1>
</div>
CSS:
.wrapper {
width: 100%;
height: 100%;
position: relative;
padding: 30px;
background: #fafafa;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
JSFiddle
You should increase the font size of Zakaria Ridouh text it will automatically set in that viewport like
<h1 style="font-size: 30em;"> Zakaria Ridouh </h1>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How can I crop an image (600х450) and create border on it using CSS?
into
Is it possible? What is better to use? Create some wrapper element with border-radius?
I think this is the best you can do with css:
CSS:
img {
width:400px;
height:400px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
http://jsfiddle.net/andyfurniss/rmc4nuu7/
Then just add a white border and a box-shadow.
<style>
#img{
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-right-radius: 10%;
border-top-right-radius: 10%;
width: 600px;
height: 450px;
}
</style>
I have update #Phylogenesis' example to add borders, shadows and make it responsive.
In addition to not set fixed width and hieght, relevant portion of code is the following:
#mask img {
margin-left: 50%;
transform:translate(-50%, 0);
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm looking for a way to give a div a background with a fixed width.
In particular I want the div to have a 5 pixel one-colored background (no percentages, no gradient) and the rest of the div being transparent. In this case I don't want to use a border!
enter link description hereYou can use a pseudo-element and then style that. Make it 5px wide and 100% height of the div to make sure it covers the whole lot.
See this fiddle.
.bg {
height: 100px;
}
.bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 5px;
background-color: blue;
}