as a medium of learning I try to replicate some things I see in the Internet. A friend of mine that knows what am I doing, saw a template and asked me to replicate part of it for his web page, I already have most of what I needed from the template, but the thing he liked the most I tried and failed and I am not understanding what is the magic involved in this template...
What I need is to replicate the main sheet transparency and the light effect behind it, the transparency I made was with a black 1x1 png made on the GIMP(I can't buy the Photoshop) I also have a nice pattern like in the template since it is one of the things my friend asked...
this is the effect I want, I tried messing around with shadows, but didn't get what i wanted I ended up deleting the code, now all I have is this:
HTML:
<body>
<div id="box"></div>
<div id="light"></div>
CSS:
#light{
border:solid 0px white;
height:550px;
width:800px;
left:50%;
margin-top:130px;
margin-left:-400px;
z-index:-1000;
position:absolute;
box-shadow: 0px 0px 300px #929292;
border-radius:100px;
background-color:#929292;
opacity:0.4;
}
#box{
background-image:url(../images/shtr.png);
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}
i don't know if i need to use jquery or javascript, or if that would help in the page performance...
There are some CSS3 things you can do here.
The first thing you need to do is setup the divs with the texture and highlights. The div with the highlight should ideally be a child of the textured div.
HTML:
<div class="wrap">
<div class="transp"></div>
</div>
Next you need to apply the effects and backgrounds to the correct elements:
CSS:
.wrap
{
background: url(http://wallpoper.com/images/00/35/83/02/pattern-patterns_00358302.jpg);
height: 500px;
width: 500px;
}
.transp
{
position: relative;
top: 20px;
left: 30px;
background: rgba(0, 0, 0, .7);
height: 100px;
width: 100px;
box-shadow: 0px 0px 30px #fff;
}
http://jsfiddle.net/7fTAH/
I managed to get it done, i created a new div that casts a shadow, placed it outside of the screen(left:100%;) and the shadow is casted to the center with the color #CECECE the HTML code:
<div id="light"></div>
<div id="box">
( ... content ... )
</div>
in the CSS :
#light{
position: absolute;
background: rgba(0, 0, 0, 0);
height: 800px;
width: 840px;
z-index:-1000;
opacity:0.15;
}
#box{
background-image:url(../images/shtr.png);/*black 50-60% transparent 1x1 image*/
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}
and to cast the shadow I used a jQuery script, via only css it wasn't working i don't know exactly why... the code:
$(document).ready(function() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
var A = -myWidth - 49.5*myWidth/60
$("#brilho_grande").css("box-shadow", A+"px 0px 10000px 100px #CECECE");
$("#brilho_grande").css("left", 2*myWidth+"px");
$("#brilho_grande").css("top", "339px");
});
Related
i created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?
CSS:
#box{
background-color:white;
opacity:0.4;
width:600px;
height:200px;
border-radius:15px;
border: 5px solid black;
}
You cannot make part of an element one opacity and another part of that same element another opacity.
Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/
Try using rgba() for background color instead - or wrap the element in something.
.box {
background: rgba(255, 0, 0, .5);
}
Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:
.entirebox {
width: 600px;
height: 200px;
border-radius: 15px;
border: 5px solid black;
}
#box {
background-color: white;
opacity: 0.4;
}
<div class="entirebox">
<div id="box">
<p>The stuff that you originally had here</p>
</div>
</div>
Here, I added the containing div and named it entirebox. Notice how the containing div has a class, while the div you started off with still has an id.
Hope this helped.
if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:
body{
margin: 0px;
}
div.child {
display: block;
position: relative;
width: 200px;
height: 150px;
background: red;
opacity:0.3;
}
div.parent{
display: inline-block;
position:relative;
border: 4px solid black;
top: 0px;
left: 0px;
}
<div class="parent">
<div class="child">
</div>
</div>
I am a newbie to both html and css and for the life of me I cannot get this right. Can someone please assist me in coding this?
This is what I have done so far, but now I'm stuck and my image is not showing up at all..
<div class="image"></div>
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship at it’s best.
</p>
</div>
#box1 {
width: 100%;
padding: 100%px;
border: 2px solid navy;
margin: 0px;
background-colour: white;
}
div.image {
background: url(Images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
There are a several wrong things here:
When you set any CSS property like padding you should only use one kind of messure: px, %, em, rem... But not two, as you do in #box1. This is an error.
This is matter of style. When you set a property to 0 is better not set px, nor any kind of messurement units.
Now, your goal.
You want to get your #box1 inside of your .image so you should put one tag inside of another, as you could see on my code. Doing that you will be very close to your solution.
Next thing is centering you #box1. There are a lot of ways to do that, I put here my favourite, but, as always, the best way depends on the situation.
#box1 {
width: 50%;
border: 2px solid navy;
margin: 0 auto;
color: #FFF;
background: navy;
opacity: 0.8;
border-radius: 5px
}
div.image {
padding: 20px;
background: url(http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="image">
<div id="box1">
<h2>Welcome to the home of</h2>
<h1>Oliver & Sons</h1>
<p title="Oliver & Sons - Exquisite Carpentry">
In my workshop patience, skill and immaculate precision are combined to produce items that is unique, of exquisite taste and quality and could very well be a heirloom in your family. Explore my gallery and contact me when you are ready to experience craftsmanship
at it’s best.
</p>
</div>
</div>
Looks like the outer container will be a background image, then you will have another container to hold the text which will could use the the background-color: RGBA property.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
background: url(link/to/image) center center;
background-size: cover;
// Use prefixes
}
.inner-container {
background-color: rgba(255, 255, 255, 0.6);
color: #000;
width: 500px;
margin: 60px auto;
}
Please make sure you explain as much as possible in your example code, SO isn't here to code for you :)
Here is a pretty useful link explaining RBGA
https://css-tricks.com/rgba-browser-support/
I want to know how I can manage something like this in css.
I mean the M, in my case this is a picture of a letter, which have to go over a border.
I try it on tipeeestream on a event list, and I've tried some things, but doesn't work. The problem is, that I don't get a good resource about their css style and I have to get a informations about the browser about their css sytle.
Can someone help me out please?
Edit: This is my css code in their editor
.event .left {
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: black;
}
.left {
position:relative;
width: 50px;
}
.left:after {
content: "";
position:absolute;
overflow:visible;
width: 100px;
height: 100px;
display: block;
}
.event .middle, .event .right {
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: black;
}
.event.middle-event .middle, .event.middle-event .left, .event.middle-event .right{
background: transparent;
border-style: none;
}
.event.last-event .middle, .event.last-event .left, .event.last-event .right{
background: transparent;
}
You can try with absolute and relative positioning for each of the elements, the background, the M, and the "eanwhile".
http://codepen.io/ruchiccio/pen/zBoGXY
<div id="background">
<div id="m">M</div>
<div id="title">eanwhile</div>
</div>
#background {width:500px; height:100px; background-color: yellow; border:4px solid black; position:relative;}
#m {font-size:220px; position:absolute; top:-80px;}
#title {font-size:70px; position:absolute; top:10px; left:180px;}
As the commenters mentioned, please include the code that you have tried so far next time.
Using CSS, the easiest way to do this is set the element with the border (I've chosen the class .box) to have position:relative;. Then put the image in the box, and set its position as: position:absolute;. After this, you can move the image around freely, relative to the .box. Here is an example: http://jsbin.com/dimonilife/edit?html,css,output
You can set overflow: visible to the element containing the image and then give the image negative margin top.
eg:
<div style="overflow: visible;">
<img src="..." style="margin-top: -40px" />
...
</div>
I have styled them using inline styles only for demo purposes, the styles should be applied using classes if you want to follow best practice.
I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (top:0px, left:0px).
This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.
I have attached a JSFiddle with an example where I would have expected the yellow box be at the top corner of the page rather than inside of the container element.
You can find below a simplified version of the fiddle:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}
<div id="container">
Blue: Outer, <br>
Purple: Middle<br>
Yellow: Inner<br>
<div id="outer">
<div id="middle">
<div id="inner">
Inner block
</div>
</div>
</div>
</div>
How can I make translate3d work with fixed-positioned children?
This is because the transform creates a new local coordinate system, as per W3C spec:
In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
There's not currently a work-around that I'm aware of.
It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.
As Bradoergo suggested, just get the window scrollTop and add it to the absolute position top like:
function fix_scroll() {
var s = $(window).scrollTop();
var fixedTitle = $('#fixedContainer');
fixedTitle.css('position','absolute');
fixedTitle.css('top',s + 'px');
}fix_scroll();
$(window).on('scroll',fix_scroll);
This worked for me anyway.
I had a flickering on my fixed top nav when items in the page were using transform, the following applied to my top nav resolved the jumping/flickering issue:
#fixedTopNav {
position: fixed;
top: 0;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
Thanks to this answer on SO
In Firefox and Safari you can use position: sticky; instead of position: fixed; but it will not work in other browsers. For that you need javascript.
In my opinion, the best method to deal with this is to apply the same translate, but break children that need to be fixed out of their parent (translated) element; and then apply the translate to a div inside the position: fixed wrapper.
The results look something like this (in your case):
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
</div>
<div style='position: fixed; top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
<div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
Inner block
</div>
</div>
JSFiddle: https://jsfiddle.net/hju4nws1/
While this may not be ideal for some use cases, typically if you're fixing a div you probably could care less about what element is its parent/where it falls in the inheritance tree in your DOM, and seems to solve most of the headache - while still allowing both translate and position: fixed to live in (relative) harmony.
I ran across the same problem. The only difference is that my element with 'position: fixed' had its 'top' and 'left' style properties set from JS. So I was able to apply a fix:
var oRect = oElement.getBoundingClientRect();
oRect object will contain real (relative to view port) top and left coordinates. So you can adjust your actual oElement.style.top and oElement.style.left properties.
I have an off canvas sidebar that uses -webkit-transform: translate3d. This was preventing me from placing a fixed footer on the page. I resolved the issue by targeting a class on the html page that is added to the tag on initialization of the sidebar and then writing a css :not qualifier to state "-webkit-transform: none;" to the html tag when that class is not present on the html tag. Hope this helps someone out there with this same issue!
Try to apply opposite transform to the child element:
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
<div style='position: fixed; top: 0px;
-webkit-transform:translate3d(-100%, 0px , 0px);
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
Inner block
</div>
</div>
Add a dynamic class while the element transforms.$('#elementId').addClass('transformed').
Then go on to declare in css,
.translat3d(#x, #y, #z) {
-webkit-transform: translate3d(#X, #y, #z);
transform: translate3d(#x, #y, #z);
//All other subsidaries as -moz-transform, -o-transform and -ms-transform
}
then
#elementId {
-webkit-transform: none;
transform: none;
}
then
.transformed {
#elementId {
.translate3d(0px, 20px, 0px);
}
}
Now position: fixed when provided with a top and z-index property values on a child element just work fine and stay fixed until the parent element transforms. When the transformation is reverted the child element pops as fixed again. This should easen the situation if you are actually using a navigation sidebar that toggles open and closes upon a click, and you have a tab-set which should stay sticky as you scroll down the page.
One way to deal with this is to apply the same transform to the fixed element:
<br>
<div style='position:relative; border: 1px solid #5511FF;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 100px; width: 200px;'>
<div style='position: fixed; top: 0px;
-webkit-transform:translate3d(0px, 20px , 0px);
box-shadow: 3px 3px 3px #333;
height: 20px; left: 0px;'>
Inner block
</div>
</div>
Designing a web site in which i've used a lot of background:rgba in many places.hence,when i tried to make a lightbox in which i'm using background: rgba(0, 0, 0, 0.6) !important; to make the rest of the screen transparent -- not working as the background from other elements are getting applied (as expected).
Tried to use z-index to implement the lightbox,but failed
I'm bad at explaining,so here's the code
<html>
<style type="text/css">
.element{
height: 200px;
width: 300px;
background: rgba(255,255,255,0.5);
z-index: 1;
border:1px solid black;
position: relative;
margin: 0 auto;}
.black{
position: relative;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 200;}
</style>
<body class="black">
<div class="element">Hello,i have to go to the background
but am not going cos my immediate parent isnt
letting me,even though my grand dad asked me to!!..
</div>
</body>
</html>
As you can c,the div is not in the background but in the foreground.Without the background set within the div -- this can be solved,but the site i'm working on has too many backgrounds to get rid of(so,cant do that)
Please help,
Newbie
If I understand your question, you want a transparent overlay to cover the entire screen underneath the lightbox.
The proper way to do this is to create a full screen floating div to cover the entire screen. The css would look like this.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.6);
z-index: 0;
}
Then add a <div class="overlay"></div>