For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
Related
I want to align the header text (blue background) to the right/bottom corner of the header so that it is ALWAYS in that position no matter the device (responsive). So far it looks different on every device I've tested on, so I'm stumped. I've spent ALL DAY on this and gotten nowhere. Can anyone help?
Thank you!
[URL removed for privacy]
P.S. I have read CSS Positioning relative to corner of Div and tried to implement it, but am still stuck!
You can give position: relative to the parent and position: absolute; right: 0; bottom: 0; to the child element and the child will be positioned relatively to the parent (it will be at the bottom right corner). Here is an example:
.wrapper {
width: 100%;
height: 150px;
position: relative;
background-color: violet;
}
.target {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
color: white;
text-align: center;
line-height: 100px;
right: 0;
bottom: 0;
}
<div class="wrapper">
<div class="target">TARGET</div>
</div>
I want to apply a background-color on an image to put a shadow on it.
Nothing very peculiar for now, I simply put background-color:rgba(23,23,23,0.88); in my CSS.
But on this image, I need to have an other div, who display the real image without the shadow on it and I don't know how I can do it.
I made a fiddle because it must not be very clear: https://jsfiddle.net/Haplo31/aguxfr67/
In this fiddle, I would need to have the blue div "content" displaying the part of the image below without the background-color of the bgContainer, like a window on the image. (I don't need the blue color at all, it's just to highlight the div for the example)
Is this possible?
Thanks a lot for your time and your help
You could be using the box-shadow property, which comes in pretty handy in situations like this. I modified your bg-container class and added a :before selector to apply the shadow.
Text can be inserted through the content css-attribute, you could also create another div-class, apply the same positioning properties and fuel your text into that.
.imgContainer {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoR1aeLhVEeg-rfmWln8uuNI7t0El3zNY8HHfKT1Qwd2oN8-GPQQ');
background-size: cover;
width: 300px;
height: 200px;
}
.bgContainer {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bgContainer:before {
content: 'This is some sample text to demonstrate you can get content as well';
color: white;
padding: 5px;
width: 50%;
height: 50%;
position: absolute;
bottom: 25%;
right: 25%;
box-shadow: 0 0 0 300px black;
opacity: 0.88;
}
.content {
width: 100px;
height: 100px;
top: 100px;
background-color: blue;
}
<div class="imgContainer">
<div class="bgContainer">
<!--<div class="content">
</div>-->
</div>
</div>
For a project I have to create a pear-shaped container. I tried doing this using CSS3 rounded corners but it just doesnt look exactly like it. I then used an image at the bottom, but I need this to be responsive (scalable image).
I want to code something like:
http://tinypic.com/view.php?pic=98fxid&s=5
But as you minimize the browser screen, the layout breaks and the pear shape is not scalable. I would like to know if there is a way to do this using CSS3 OR a better way to do this using scalable images.
By the way, I'm using bootstrap and this is my first attempt at making a website using bootstrap, so any guidance would be much appreciated.
You could create the pear shape using two intersecting circle segments, one for left-hand side and one for the right-hand side. Circle segments are created by limiting the circle to its parent container via overflow: hidden;. To simplify the markup, you can create the child circle elements using the :before and/or :after pseudo elements.
HTML:
<div class="content-form">
<div class="pear-shape left"></div>
<div class="pear-shape right"></div>
</div>
CSS:
.content-form {
width: 75%;
max-width: 325px;
height: 200px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
position: relative;
}
.pear-shape {
overflow: hidden;
width: 50%;
height: 200px;
position: relative;
top: 100%;
}
.left { float: left; }
.right { float: right; }
.pear-shape.left:before {
position: absolute;
left: 0;
top: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 0 250px;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
.pear-shape.right:before {
position: absolute;
top: 0;
right: 0;
content: '';
width: 200%;
height: 100%;
border-radius: 0 0 250px 0;
background: url(http://www.domainandseo.com/bootstrap/img/design.png);
}
Check out this example Fiddle.
At some point, you will be able to use the css shapes module, and there might be some browsers that already support it. In the mean time, you might want to look at SVG or canvas as an option.
I am building a site that has an absolutely positioned banner at the top of the page. This div has a container with id showcase. Overlaying this banner is the navigation bar and logo, both of these are inside a container div called navLogoContainer, it is relatively positioned.
Both of these container divs are NOT children of any other elements (other than body and html), they are independent.
This is the weird part, if I put the navLogoContainer code ABOVE the code for the showcase, the contents of navLogoContainer are not shown, however one of the links is still clickable (the logo), but not visible, everything else (the navbar) is neither clickable or visible.
If I put the navBarContainer code BELLOW the showcase code, everything works perfectly.
Sure, I could just put the navBarContainer code bellow the showcase code and everything would be fine, but this results in my code not being as readable, and not following a logical order, which I would like to avoid. Plus, I'd really like to know when the heck it's doing this!
I'm really baffled by this, I've been trying opacities, display properties, z-indexes, everything I could think of, any help with this would be very much appreciated.
Thanks in advance.
The relevant HTML and CSS (apologies for the scruffiness of, and the comments all over the CSS, it's not yet at release quality :) :
HTML:
<div id="navLogoContainer">
<div id="logo">
<p class="big">Name</p>
<p class="small">Description</p>
</div>
<nav>
Home
Link One
Link Two
</nav>
</div>
<div id="showcase">
<!First showcase>
<div id="firstShowcase">
<div id="firstCaseStudyContainer">
<div id="firstCaseStudy3DContainer">
<div id="firstCaseStudy">
<p class="caseStudyTitle">Case Study Title</p>
<p class="caseStudyDescription">A brief description of relevant stuffView the site or view a second page.</p>
</div>
</div>
</div>
</div>
</div>
The CSS:
/*The code for the navbar*/
#navLogoContainer {
margin: 0px auto;
width: 1050px;
padding-top: 23px;
height: 62px;
z-index: 5;
min-width: 1050px;
}
#logo {
position: absolute;
float: left;
background-color: #00224d;
height: 62px;
width: 273px;
}
#logo a {
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 3;
}
/*The showcase container*/
#showcase {
position: absolute;
width: 100% !important;
height: 399px;
top: 0px;
min-width: 1050px;
z-index: 0;
}
/*The backgrounds for the showcases*/
#firstShowcase {
background-image: url("first.png");
margin: 0;
width: 100% !important;
height: 100%;
z-index: 0;
}
/*The CONTAINERS for the case studies*/
#firstCaseStudyContainer {
width: 930px;
height: 399px;
margin: 0px auto;
z-index: 0;
}
/*The 3D containers*/
#firstCaseStudy3DContainer {
position: absolute;
height: 177px; /*Case study box height related. DO NOT SET TO AUTO. This value must be done by hand.*/
width: 410px;
margin-left: 530px;
margin-top: 247px;
background-image: url("3dtriangle.png");
background-position-y: 100%;
background-repeat: no-repeat;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
}
/*The actual text boxes for the case studies. They default to auto*/
#firstCaseStudy {
position: absolute;
height: auto;
width: 392px;
bottom: 0;
margin-left: 9px;
overflow-y: hidden;
-webkit-transition: all 1.0s;
-moz-transition: all 1.0s;
background-color: black;
overflow-y: hidden;
}
From what this says the showcase is doing exactly what you are telling it to do.
you put in the navLogoContainer which has no position, so it's going to be anchored to the top. Then you put in the showcase. This has an absolute position with a top: 0 so it's absolutely positioned to the top of either the page or the container element that both of these are in. So it makes sense that it's covering the logo. If you want the showcase below the logo stuff you need to position it below the navLogoContainer.
So if the navLogoContainer is 50px high the top attribute of the showcase should be 50px. If you're looking to have the navLogoContainer just be above the showcase then you need to give it a position:relative + some z-index love so it knows what it's doing.
I have something pretty simple I want to do. I'm still working through all the gotchas of CSS, so bear with me. I want to essentially take a div, put it position: absolute; left: 10px; right: 10px; bottom: 10px, then take its children and center them horizontally within the browser. This is my attempt at doing so:
HTML:
<div class="notificashun-holder">
<div class="alert-message info notificashun">
<p>Hello, World!</p>
</div>
</div>
CSS:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
}
.notificashun {
display: inline-block;
margin: 0 auto;
}
The thing is, I'm using Bootstrap and the alert-message class makes items display: block, so I need to "shrink" them down to normal size (to fit only the size of their contents).
Can anyone help me do this? I simply need to make notificashun-holder be ten pixels from the left, right, and bottom of the browser, and notificashun be only as big as it needs to be and be centered within notificashun-holder.
Since you're using an inline-block element for the .notificashun, it can be affected by the text-align property, so to make it centered, just apply the text-align: center; property to your .notificashun-holder:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
/*New property:*/
text-align: center;
}