I'm trying to make the sidebar for my theme match the main content, in that there's a solid background with a transparent border. I can make them work individually, but when I try to do both it doesn't work right. Here's the snipet of code that's been causing the problem:
#sidebar {
width: 300px;
background-color: #A3A3CC;
/*border-style: solid; border-width: 15px; border-color: rgba(255, 255, 255, 0.4);*/
position: fixed;
left: 60px;
top: 90px;
height: 490px;
margin-left: 30px;
}
I am aware that the border code is noted out, and that's because the border code and the background color code work fine individually, but when I have both at the same time, I get this.
Does anyone know how I can fix this? I just want to have a semi-transparent background under a solid one to make a nice border effect.
You can use a box-shadow instead of a border.
JSfiddle Demo
CSS
#sidebar {
width: 300px;
background-color: #A3A3CC;
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.4);
position: fixed;
left: 60px;
top: 90px;
height: 490px;
margin-left: 30px;
}
Since the border is rendered on top of the background of the div, they are stacking and not giving you what you want. You could wrap another div around it, and use that as your border:
JSFiddle
HTML
<div id="outer"><div id="sidebar"> </div></div>
CSS
#sidebar {
background-color: #A3A3CC;
width: 300px;
height: 490px;
}
#outer{
padding:15px;
background: rgba(255, 255, 255, 0.4);
position: fixed;
left: 60px;
top: 90px;
}
Related
So I'm trying to make a top menu bar in a fixed position.
The problem is while everything looks alright when scrolling, all images, divs and all that goes behind the div when scrolling, the text, on the other hand, is still in front of the menu.
I've made sure that the text is loaded in before the div in code but yet it goes in front like this:
https://i.gyazo.com/4ac5dfd1d316c47a80a6991fc286e0b4.gif
The code is quite messy since I'm quite new to all this but I'll try to show the important parts of the code.
HTML:
<div class="logotext">
<h1>Rustic Café</h1>
</div>
<div class="topwood"></div>
CSS:
.logotext
{
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 41%;
width: 100vw;
height: auto;
z-index: 998;
font-size: 83px;
font-family: "Satisfy", cursive;
text-shadow: 10px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.topwood
{
width: 100%;
height: 4.2vw;
top: 0vw;
left: 0vw;
position: fixed;
background-color: rgb(236, 236, 236);
box-shadow: 0 0 3px;
}
The problem is due to 'z-index' property in CSS. your top bar menu z-index should be greater than the text.
for example:
.topBar {
position: fixed;
z-index: 999
}
.text {
position: relative;
z-index: 998;
}
Why do .logotext need a z-index of 998?
Anyway, All you need is to add a higher z-index value to your header.
I am trying to create a box shadow but as soon as another box hits it the box shadow is invisible. I'd like to have the box-shadow go over the other box.
Here an example of what is going wrong. As you can see there is a shadow where there is not box.
Fiddle
HTML
<header>
</header>
<div id="content">
</div>
CSS
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}
HTML elements are positioned statically by default in document normal flow.
You have to position the header as relative and add a higher z-index (if needed) to bring that element at the top of the others without changing layout, as follows:
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
position: relative;
z-index: 10; /* optional */
}
WORKING DEMO.
try position:absolute or relative for the header
header {
height: 100px;
background: black;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.7);
position:absolute;
width:100%;
}
#content {
width: 350px;
height: 300px;
margin: 0 auto;
background: #CCCCCC;
}
JSfiddle
I have found information on how to create various shapes, such as trapezoids and hearts, using only CSS; however, they are solid shapes. Is there a way to create a shape, such as a trapezoid, that is transparent and only displays an outline/border?
By making two shapes and overlapping them, with one larger than the other, it is possible to make it appear to have this effect, but that would only work if the background behind the shape is a solid color, which may not always be the case. Thus the reason for the transparency.
For examples of the CSS shapes: link; look at the triangles, for example.
Thank you.
This is usually done with border tricks, and those are not really helpful for this
You need others techniques for that.
For instance, see this CSS
body {
background: linear-gradient(90deg, lightblue, yellow)
}
.trapezoid {
left: 50px;
top: 50px;
position: absolute;
height: 100px;
width: 500px;
background-color: transparent;
}
.trapezoid:before {
content: '';
width: 57%;
height: 100%;
left: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 0px 3px 3px;
-webkit-transform: skewX(-20deg);
}
.trapezoid:after {
content: '';
width: 59%;
height: 100%;
right: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 3px 3px 0px;
-webkit-transform: skewX(20deg);
}
fiddle
The base element has the background transparent, as per your request. I have set a gradient in the body to verify it.
The you add 2 pseudo elements, that have the borders set (except the inner one), and that are skewed to achieve the trapezoid
You can set background color to transparent
background-color: transparent;
The way that these shapes are typically done in css is through border manipulation. When you have a transparent trapezoid it's just a rectangle with the sides lopped off by a border. Because of this, there is no way to use a uniform border and maintain the same shape.
What's your current code look like? You should just be able to add a border to it and no background color. Example: http://jsfiddle.net/tBBkg/
Overlapping transparent shapes (with border):
#square {
width: 140px;
height: 140px;
border: 2px solid blue;
position: absolute;
}
#circle {
position: absolute;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 2px solid pink;
}
Perhaps I'm not understanding the question properly, in which case could you clarify?
I have two problems with my portfolio section which is not as smooth as I want it to be. Here they are:
I wanted my projects to change background-color and show a small plus sign when hovering over them. In the same time I wanted to add a "transition: all 0.5s ease-in-out;" but the result is not what I expected. It probbaly happens because my "plus sign" should be located in another div but I didn't know how to make it work. Instead I put it here:
.projectshot a .over:hover{
position: absolute;
background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
This is the effect I wanted to achieve: http://bjorsberg.se/
The second problem that bothers me is that, if you look really carefully, when you approach each of the projects with the mouse the mouse pointer starts to "dance" and it behaves crazy??? How can I fix that???
Here is my JSFiddle:
http://jsfiddle.net/8fCMA/2/
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
I am quite new to web design (4 months since I started learning) and I am clearly not good with positioning div's inside div inside another div... So, please feel free to correct my fiddle if you see any trouble I created. Thanks!
I would simplify the html structure if I were you, as it is not necessary.
e.g.: projectshot can look like this:
<div class="projectshot">
<a href="http://www.yahoo.com" target="_blank">
<img alt="Sushi" src="...">
</a>
</div>
and you can add the "cover" as :before pseudoelement.
Then - in css all you need to do is to add this to the "cover" element:
opacity: 0;
transition: opacity .2s;
and - on hover - change the opacity to 1:
opacity: 1;
here's the updated demo
(I've removed a lot of your html/css code just for demo purposes)
I've just made some small changes including:
Moving the hover to the .projectshot box.
Moving background-position and background-repeat to the non
hover definition.
Adding the transitions.
It works for now but you can still remove a lot of code. Even the html can be heavily reduced.
I suggest you to have a look at that too (DEMO).
.projectshot{
position: relative;
padding: 10px;
height: 150px;
margin-bottom: 30px;
display: inline-block;
}
.projectshot img{
height: 150px;
width: 200px;
border-radius: 8px;
-webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
-moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
box-shadow: 0 9px 13px rgba(0,0,0,.14);
}
.projectshot:hover .over{
background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
background-color: rgba(51, 51, 51, 0.6);
transition: all 0.5s ease-in-out;
}
.projectshot:hover {
cursor: pointer;
}
.over{
position: absolute;
border-radius: 8px;
height: 150px;
width: 200px;
box-sizing:border-box;
-moz-box-sizing:border-box;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.5s ease-in-out;
}
.inner{
background: rgba(113,122,137,.85);
border-radius: 8px;
width: 100%;
height: 100%;
display: none;
}
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
I'm working on a creative project whereby I want to add 'triangles' to box elements to get a speech bubble effect and still apply an opacity to each element as shown below:
I can get the blocks to display correctly with a 1px boarder on the right and bottom of each element. This, however, does not include the arrows on the heading element. When I add the arrows, using .heading:before, the result is as shown below:
As you can see, the original border remains, breaking the arrow and its corresponding element.
My HTML is as follows:
<li class="heading">
<div class="text_contain_head">
<h1>Heading</h1><p>Subheading</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 1</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 2</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 3</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 4</h2><p>Description</p>
</div>
</li>
and here's the CSS for .options:
.options {
position: relative;
padding-bottom: 25%;
height: 0;
width: 25%;
background-color: rgba(0, 0, 0, 0.25);
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
and here's the CSS for .heading:
.heading {
position: relative;
padding-bottom: 25%;
width: 75%;
background-color: rgba(0, 0, 0, 0.6);
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 40px;
padding-right: 40px;
float:left;
}
.heading:before {
content: "\0020";
display: block;
border: solid 20px transparent;
border-right-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 50%;
right: -40px;
margin-top: -20px;
z-index: 1002;
transform:scale(1,1.5);
-ms-transform:scale(1,1.5);
-webkit-transform:scale(1,1.5);
}
P.S. I use :after to add a white triangle with a 1px offset underneath the :before to replicate the border around the triangles.
In the end, I want to be able to keep the elements' opacities (due to the background image) and still be able to 'remove' the original border where the arrows overlap.
I'm stumped, as such any and all advice would be most apreciated
here is a jsfiddle of what I have so far: http://jsfiddle.net/N2nZ6/1/
I have put up a fiddle of my own: http://jsfiddle.net/Pevara/8WBcQ/
It was not easy, but i think i got away with it, but with some limitations:
- I had to add two empty nodes inside your .heading for the arrows. I know it isn't pretty, but I tried without them and just couldn't get it to work.
- I had to set a fixed width. It might be possible to do with percentages, but as it requiers very exact positioning, I did not even try... (percentages and exact postioning are a no go in my experience)
How does it work:
- I turn the extra nodes into a square and rotate them 45deg to make them look like an arrow point
- I position them absolute over the edge of the .heading, to cover up the border.
- I set them to overflow hidden to prevent the :after and :before overflowing
- I set the background image on the :before, counter rotate 45deg, and position exactly to line up with the background image of the ul
- I add another :after with a the same semi-transparent background color as the .heading to make the backgrounds match exactly.
It is not exactly clean, and it will take some fiddling with the positioning, but it works (in chrome, other browsers might need some prefixes). I don't dare to look at the result in older IE's. Might not be useable in a real life website, but as a proof of concept...
In real life I would probably go for a sprite image with the borders and arrows already in place, and position the li's on top of them.
And because SO insists, here is a part of the css:
.arrow-down {
position: absolute;
display: block;
overflow: hidden;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
top: 200px;
left: 300px;
background-color: rgba(0, 0, 0, .5);
margin-left: -25px;
z-index: 5;
border: 1px solid #fff;
border-left: none;
border-top: none;
}
.arrow-down:after {
content:' ';
display: block;
width: 300px;
height: 300px;
-webkit-transform: rotate(-45deg);
background-repeat: no-repeat;
background-image: url(http://www.placekitten.com/900/600);
background-position: -114px -77px;
z-index: 1;
position: absolute;
top: -100px;
left: -150px;
}
.arrow-down:before {
content:'';
background-color: rgba(0, 0, 0, .5);
z-index: 2;
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
I think that achieving this effect is a bit complicated which can be done by making the triangle opaque and keeping the same background image(using appropriate position) for the triangles which would cover the border.