http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help
To softly lighten up the area behing the logo you can use a combination of an rgba background, rounded borders and a light shadow on the image:
.head > img {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
Don't forget to add vendor-prefixes to support all browsers...
You can add a background with rgba property to give a fake light background.
Try this
#logo {
background-color: rgba(255,255,255, 0.5);
/* Then other css */
}
In your case, modify your .head to this
.head {
padding-left: 5%;
background-color: rgba(255,255,255,0.5);
}
The "border" as you put it is margin on the body. To remove this, simply:
body { margin:0; }
What you can do is give the .head divider an opaque background:
.head { background:rgba(255,255,255,0.3); }
This isn't supported on older browsers, however.
You can do
convert to PNG and make the original image 0.2 opacity
(better) have a <div> that is position: absolute inside body and the same height as body, then apply the background image and opacity: 0.2; filter: alpha(opacity=20);
Try CSS3 please
.box_shadow {
-webkit-box-shadow: 0px 0px 10px 0px #fff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 10px 0px #fff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
you can do this by 2 ways
1 text-shadow but you are using image so you have to do this in photoshop in layer style > drop shadow and select light color
you can do this in this also but it covers in rectangular form not behind your logo text
and
2 is to use background that also have the same effect in rectangular form
use background:rgba(255,255,255,0.6);
last 0.6 is opacity adjust this to darken or ligten the color
Related
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
i was using a RGBA background, but it was not working in IE6. I found a way to sort this online.
table{
width: 100%;
border-radius: 20px;
border: 2px solid black;
padding: 10px;
text-align: center;
background: #87C4CF;
background: rgba(135, 196, 207, 0.7);
background:rgb(135,196,207);
background: transparent\9;
background:rgba(135,196,207,0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b287C4CF,endColorstr=#b287C4CF);
zoom: 1;
}
table:nth-child(n) {
filter: none;
}
This works in IE6 but now the table does not display in IE 8. Works fine in every other browser.
Is a translucent background really going to make or break your layout?
For IE8, make a translucent 10px x 10px PNG in PhotoShop with the color and transparency you want and set it
as the background image, repeating.
Give IE6 a solid background
color
Everything else will support your rgba() background syntax.
You can use CSS3 PIE to better your life with ie
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
Look at http://www.sydsvenskan.se/ or just look at the image bellow, and check their big image with text overlaying it at the top of the site.
They have a black transparent background on the text, but the text itself isn't transparent. How do they accomplish this?
If I try to add transparency on a text block with background set, the text gets transparent as well.
CSS 3 introduces rgba colours. Use one for the background.
For compatibility with browsers that do not support it you can fallback to solid colours or translucent PNGs.
They use a semi-transparent PNG background image.
.supertop div h1 a {
color: #FAFAFA;
background-image: url("/template/ver2-0/gfx/trans_black.png");
padding: 2px 10px;
line-height: 60px;
}
this is the safest approach at the moment, as long as not all browsers support rgba colours.
It will be an opaque grey in IE6, which doesn't support alpha transparency.
Background image is the key http://www.sydsvenskan.se/template/ver2-0/gfx/trans_black.png
it has a black transparent background image, firebug it and you'll see it.
Use RGBa!
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
Check this out: CSS3 gradient Generator, pick the colors and generate the code, then add it to the body in your CSS (Or whatever element you want it on).
.body /*or element of your choice*/
-webkit-gradient(
{
linear,
left bottom,
left top,
color-stop(0.02, rgb(91,204,245)),
color-stop(0.76, rgb(5,37,70))
)
-moz-linear-gradient(
center bottom,
rgb(91,204,245) 2%,
rgb(5,37,70) 76%
)
}
For the shadow from your main content use:
.MyElement
{
box-shadow: 10px 10px 5px #888;
}
And also check out CSS3 Box-shadow.
Also, because not every browser supports the box-shadow yet (IE), you can use border images. But IE doesn't suppport that either so, what I did on a site was to just make a 1px high PNG image of the shadow and set it as the background to my wrapper div, repeated it down/up (can't remember if that's X or Y) and it worked fine :)
Hope some of that helps.
img.shady
{
display: inline-block;
webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
padding: 10px;
margin-bottom: 5px !important;
min-height: 240px;
width: 630px;
border: 1px solid #D7D7D7
}
Your sidebar should use a png image that has an opacity/transparency, then the shaded sidebar will work with gradient background. (Note, IE6 wont like this solution, so you have to find an IE6PNG hack solution which can be found almost everywhere nowadays)
For gradient background, either create a background image or use the css3 gradient