im using iframe to desplay some pages that hold a gallerys and i added
2 divs that 1 of them is an arrow build by borders.
now when i try to see the 2 divs with the iframe the background on the div that holds the arrow is white i tryed to set the background color:
background-color:transparent;
but it didnt work.
is there any way to make the div background transparent?
i should add that the page that hold the iframe got an image.
this is the css of the arrow:
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 37px;
width: 0px;
height: 0px;
You will need to add to the iframe:
allowTransparency="true"
[UPDATE]
The problem might be your arrow itself. You need to make the borders you don't want to see transparent instead of white. Compare these two:
http://jsfiddle.net/XtMCa/
And this (your CSS), which has a white background:
http://jsfiddle.net/XtMCa/1/
.transparent_div
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
Related
I am trying to style the Textarea's resizer in the dark mode of my website so that it is not a white block in an otherwise dark website. As such, I tried to both use ::-webkit-scrollbar-corner and ::-webkit-resizer, although the first one leaves white corners (see screenshot), while the other one removes the characteristic two lines from the resizer. I know these changes will affect only Webkit and Blink based browsers, thus not IE, older versions of Edge and Firefox. Is there a way I can style ::-webkit-scrollbar-corner to avoid having those white corners? I want to avoid adding custom wrappers with custom scrollbars as much as I can, as it would take me way longer and add unnecessary complexity.
Here is a minimal example to reproduce the issue:
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
textarea {
background-color: black;
color: white;
}
<textarea>
Hello
World
</textarea>
Update: To clarify, I still need the textareas to be resizable, I want to know if there is a way to remove the white top and left borders from the resizer without styling ::-webkit-resizer which would mean using an SVG to have the two lines typical of the resizer, as in the image.
It's because the textarea can be resized, so the bottom right corner is resizing box.
You can remove it by setting the resize property of textarea as none;`
I think you can do like this.
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
::-webkit-scrollbar-thumb {
background-color: #002200;
border-radius: 20px;
border: 3px solid transparent;
background-clip: padding-box;
}
textarea {
background-color: black;
color: white;
resize: none;
width: 100%;
height: 100px;
}
<textarea>
Hello
World
</textarea>
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 try to find a solution for a few hours now but I do not know how to do this. It is maybe a simple thing and I hope someone can help me out.
I created three boxes. Those boxes have a border at the top and change their background colours as soon as you scroll over with your mouse.
Screenshot without hover effect: http://i.imgur.com/TWSvdUt.png
Screenshot with hover effect: http://i.imgur.com/NdELr4T.png
My problem is now, that I also need the colour of the title and the text in another colour (#ffffff)! I do not know how I have to change my .css!
Here is what I did:
.frontpage-box {
position: relative !important;
border-top: 8px solid #233c5b !important;
background: #eeeff1 !important;
height: 280px !important;
}
.frontpage-box:hover {
cursor: pointer;
position: relative !important;
border-top: 8px solid #daaf36 !important;
background: #233c5b !important;
color: #ffffff !important;
}
Can you tell me what is wrong? How do I have to change the code, so that the font color will be "white" after hover.
Thanks in advance,
Chris
Without seeing your full code you would want to do
.frontpage-box:hover p { color: #fff }
and not set it in .frontpage-box:hover with the important.
Hello I am needing some help with my website. As you can tell from the image I have provided I need the text to be centered in the middle of the rectangular box. How do I go about doing this?
My css is,
.extendcontainer {
background: rgba(255,255,255,0.1); // Transparent White Background
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
}
set the height of the box and the line-height of the box to be the same.
Example:
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
height:30px;
line-height:30px;
}
Doesn't work for multiple lines though
add this rule
padding-top:40%;
Like this
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
padding-top:40%;
}
You can play with % to adjust it.
You can using vertical-align: middle;
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
vertical-align: middle;
}
Using line height is probably the easiest, if the text will always be on one line.
Looks like your container is 38 pixels high. To exactly center your text, try adding this:
.extendcontainer {
line-height:38px;
height:38px;
}
using padding-top may show the content centered for the screen that you are viewing currently. If the same page is seen from larger sized monitors, it may not. It is highly appreciated to use
vertical-align: middle;
so that, it is centered in all size monitors.
I know it is possible to have the effect of a double border with one below the other but is it possible using css to have part of the width of a border one color and the rest another color?
Here is an example of an image that I would like to recreate as a border using css only:
I think I figured out one way to do it. Check this out http://jsfiddle.net/RE4A7/
html
<ul>
<li><h3>Mission</h3>
</li>
</ul>
css
ul h3 {
font-size:1.2em;
font-family:arial;
border-bottom:1px solid #333;
padding-bottom:10px;
position:relative;
width:250px;
}
ul li {
list-style:none;
}
ul h3:after {
border-bottom:1px solid #ff4800;
bottom:-1px;
left:0px;
content:"";
position:absolute;
width:55px;
}
UPDATE:
Seeing that the line in the post is actually a two colored line you can use the border-image property to achieve a similar effect (example showing only the principle but is not adjusted for perfect match):
ONLINE DEMO
CSS:
div {
border-top:0;
border-bottom:1px;
-webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21;
/* ... */
}
For other browsers:
-moz-border-image:
-webkit-border-image:
-o-border-image:
border-image: /* standard */
Note that the gradient parameter varies from browser to browser apparently so this need to be adjusted as well. Demo provided will only work with webkit browsers.
Old
Do you mean something like this:
For this you can use the following CSS:
.myClass {
height:40px;
width:60px;
border:5px solid #00a;
box-shadow:0 0 0 5px #f00 inset;
padding:5px;
}
Here the box.shadow set to inset with no blur acts as the second part of the border. The padding should prevent content from overlapping.
ONLINE DEMO