I am creating a windows 95 style window, that contains an image.
My problem: the image inside the window should have a box-shadow inset but it won't display.
I can't figure out what is wrong with my code. Please let me know what am I doing wrong.
this is how the image looks like atm
this is how the image should look
https://codepen.io/roeylu/pen/rNmmxJM
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="width: 600px;">
<div class="title-bar">
<div class="title-bar-text" style="margin-right: 18px; font-family: 'blink'; letter-spacing: .7px;">
<b>window</b>
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body" style="font-size: 13px; letter-spacing: .36px; word-spacing: -3px; margin: 5px 3px 3px 3px;">
<div class="image-container">
<img src="https://www.ladymakeup.com/js/lightbox/img/demopage/image-3.jpg" style="width: 100%;
<!-- this is the part not displaying -->
box-shadow: inset -1px -1px #fff,
inset 1px 1px grey,
inset 0px 0px #dfdfdf,
inset 1px 2px #0a0a0a;" alt="image">
</div>
</div>
</div>
When give shadow effect in html CSS you need to used "top-bottom, right-left, blur color ". Give blur value to see spread of shadow color.
Related
I want to show an image in its full size in a section on my website with nothing over it.
So I created an empty section and set it as background then put a column plus a transparent element then setting padding and margin.
I'm attaching an image of the way it looks right now.
They are two sections (the one above is just for a reference. And not in the code)
Where the image is is a empty section with only background and it's the section I want to make as big as the image. Right now as you can see it's cut.
How can I make the size of the section as big as its background without having to put elements inside of it and using code?
I'm sure there must be a better way by using CSS.
<div class="content content--padding-large" style="background-color: rgb(255, 255, 255); padding: 0px;" id="_2odptjbtq">
<div class="background_changer background_changer--blur0 js-bg-next-gen" alt="" style="opacity: 1; background-image: url("//d1aettbyeyfilo.cloudfront.net/ladynetwork/15398563_1607856820728Background.webp");" data-bg="url("//d1aettbyeyfilo.cloudfront.net/ladynetwork/15398563_1607856820728Background.webp" data-was-processed="true"></div>
<div class="background_changer_overlay" style="background-image: none;"></div>
<div class="container">
<div class="row background_changer--blur0" data-component="grid" alt="" style="background-color: rgba(0, 0, 0, 0); border-radius: 0px; border-style: none; border-width: 0px; margin-top: 0px; margin-bottom: 0px; background-image: none; opacity: 1;"><div class="col-md-12 colView"><div class="js_kartra_component_holder">
<div data-component="divider">
<hr class="kartra_divider kartra_divider--border-extra-tiny kartra_divider--border-dim-black-opaque-25 pull-center kartra_divider--full" style="border-color: rgba(33, 33, 33, 0); border-top-style: solid; border-top-width: 1px; margin: 80px 0px 55px;">
</div>
<div data-component="divider">
<hr class="kartra_divider kartra_divider--border-small kartra_divider--border-royal-blue-two pull-center kartra_divider--full" style="border-color: rgba(49, 110, 212, 0); border-top-style: solid; border-top-width: 5px; margin: 0px;">
</div>
</div></div></div>
</div>
</div>
Try applying this style to it
style="min-width: 100%!important; max-width: 100%!important;"
I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.
Due to the web host I am having to use inline css to style the site.
(trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)
Normally I would use bootstrap to achieve this but as noted that is not an option.
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
What I'm getting:
What I want:
All you need to do is apply float: left to image
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
1. Apply a maximum width to sibling element:
Apply a maximum width to the sibling element (#texts) of #image, e.g:
<div id="texts" style="float:right; max-width: 80%;">
Note: max-width property value given only as a demonstration. Adjust accordingly and as per requirements.
As it is now, it contains enough text/content to occupy the whole horizontal width.
2. Declare the display type of first nested element or float left
Declare the first nested element (#image) as either an inline-block, e.g:
<div id="image" style="margin-left: 10px;display: inline-block;">
Or float it left, e.g:
<div id="image" style="margin-left: 10px;float: left;">
Note: this float may need to be cleared on the containing parent element.
As it is now, this element (div) is a block element by default, block elements will occupy the full available width of a containing element.
Code Snippet Demonstration:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; display: inline-block;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right; max-width: 80%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting
to read here other than some typo's.</p>
</div>
You can remove float: right from the #texts div and add float: left to the #image div:
<div style="display:inline-block; color:black; border:3px solid #ffd800; margin-bottom:25px; border-radius:10px; background-color: #FFF1AD; box-shadow:13px 15px 6px #2b2626; border-top:30px solid #ffd800;">
<h1 style="color:black; margin-top:-27px; padding-left:5px; font-weight:bold">
This is a title
</h1>
<div id="image" style="margin-left:10px; float:left">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top:10px; margin-left:10px; margin-bottom:10px; font-size: 120%">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
Using inline isn't normally the best idea, but if that's what you need to do in this case then you can still use Flexbox:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">This is a title</h1>
<div style="display: flex;">
<div id="image" style="margin-left: 10px;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.</p>
</div>
<div>
</div>
With this you need to add another div around the image and text content and set it to display: flex;
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 50px solid #ffd800;">
<h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; margin-right: 15px; float:left;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="">
<p>
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;float:left;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;width:90%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
I am having a little issue here. When I reduced my screen, the color "Grey" runs into my white div below it for some reason. The div above it is my jumbotron, so I'm not sure why this is happening.
My website is below for you to check out and see what happens when you reduce it on a computer.
hustlebussellunlimited.com
Here is some of my CSS code below, please tell me if you need more.
.jumbotron{
background: linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.2)
), url(main-banner.jpg);
background-size: cover;
color: #ffffff;
padding: 0;
}
.jumbotron .intro{
background: rgba(0, 0, 0,0.1);
padding-top: 120px;
padding-bottom: 40px;
min-height: 400px;
}
.jumbotron .intro .row-top div.ccont{
}
.row-bottom{
margin-top: 20px;
margin-bottom: 20px;
}
.jumbotron div.ccont{
background: #fff;
min-height: 150px;
}
.jumbotron .row-top div.ccont{
-webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron .row-bottom div.ccont{
-webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron p{
padding: 20px 0;
}
.jumbotron .media{
margin: 50px 0;
}
.jumbotron .media-body h1{
margin-top: 100px;
}
section.slider{
color: #ffffff;
background: #696969;
margin: 40px 0;
padding: 40px 0;
}
section.slider h2{
margin-bottom: 20px;
}
section.slider .col-md-8{
padding-left: 30px;
}
Here is my HTML code
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
<div class="intro">
<div class="container">
<div class="row">
<h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>
<p class="text-center">A Subsidiary of HustleBussell</p><br/>
</div>
<div class="row triangles">
<div class="up-triangle animated fadeInUp">
<div class="info">
Search Engine Optimization
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Web Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Marketing
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Systems Security<br/>
</div>
</div>
<div class="down-triangle animated fadeInDown visible-sm">
<div class="info">
Mobile App Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Consulting
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Branding<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Growth Hacking
</div>
</div>
</div>
</div>
</div>
</div>
<section id="services">
<div class="container">
<!-- Example row of columns -->
<div class="row features inner-page">
<div class="col-md-12 text-center">
<h2>Amplify your Reach, Achieve Massive Results</h2>
<p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
</div>
</div>
</div>
</section>
<section class="slider" id="features">
<div class="container">
<div class="inner-page">
<h2 class="text-center">About Us</h2>
<p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
</div>
</div>
</div>
</section>
in the fiddle i couldn't simulate the problem but i entered and inspected your website. the problem is that the element that has that grey background , respectively .jumbotron .intro , contains the triangles.
when you resize the window, the triangles go on two rows and so the height of the .info becomes bigger and overlaps the next element ( white one ).
you've hidden the triangles with visibility:hidden here (max-width: 1152px) , visibility:hidden only hides the elements but they still occupy space. you should use display:none so the elements are hidden and they don't occupy space
code :
#media (max-width: 1152px)
.up-triangle, .down-triangle {
/* visibility: hidden; */
display: none!important;
}
added the !important because you also have in your css this : .visible-sm { display: block !important;} and it's overwriting the code. i suggest you don't use !important only if you really have to.
to read more info about the difference between visibility and display see here what-is-the-difference-between-visibilityhidden-and-displaynone
On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:
1) How do I keep this from happened based on my bootply and code below
2) How do I add a top margin to the button too.
Here's my bootply:
http://www.bootply.com/KChuJgr967
Here's my html:
.content-section-d {
padding: 50px 0 0 0;
}
.centered-text {
text-align: center
}
/* Buttons */
.btn,
.btn:link,
.btn:visited {
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 15px 40px;
background-color: #db4632;
font-size: 20px;
letter-spacing: 0;
text-transform: uppercase;
border-color: #db4632;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
background-color: #db4632;
}
<div class="content-section-d">
<div class="container">
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
<div class="col-lg-12 text-center">
Register for a Free Account
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
So, as I noted in comments you need to use #media.
Here, a code for your button, which your should add to stylesheets.
#media(max-width: 1200px) {
.btn span {
display: block;
max-width: 200px;
white-space: normal;
}
}
Also, don't forget about add <span> to your button. Now button code is:
<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>
And here is full working example on JSFiddle.
P.S. Change max-width in #media to your property.
You can use vw and vh CSS rules to change the size of text according to the screen size. In your case if you add this:
font-size:3vw;
font-size:1.8vh;
It works pretty well. (Play with values to get exactly what you need)
Good evening, guys,
Could you please give me an advice,
I think I was at a deadlock!
There is the main navigation menu on the top of website.
Problem is that, I don't know how we can input shadow over the our navigation, directly in the bottom of navigation and it won't stop work of our left and right borders.
So, if I will put our shadow in another block (in my case "circle_shadow"), it won't cover up our borders, it will create new space after navigation.
I am interested, how can we put this kind of shadow on our menu, over the navigation borders?
Please, take a look:
<div class="container">
<div class="row">
<div class="common_block">
<div class="col-lg-2">Here we have a logo_1</div>
<div class="col-lg-8 border">Here is navigation</div>
<div class="col-lg-2">Here is logo_2</div>
<div class="circle_shadow"></div>
</div>
</div>
</div>
CSS:
.border {
border-right: 1px solid black;
border-left: 1px solid black;
}
.circle_shadow {
position: relative;
overflow: hidden;
padding:5px;
}
.box_center_shadow_m:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -99px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
Here I attached some images:
It is a little hard to follow what you are asking, there might be an english barrier here. But if you are looking for a rounded drop shadow, here are some samples:
.roundedCorner {
width:350px;
height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
border-radius:25px;
}
.circle {
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
More shadow options can be seen at a CoreLangs
Sorry for not clear question.
Yes, I know how to use rounded drop shadow.
Problem is not about how create rounded drop shadow.
Problem is how can we put this rounded drop shadow into the bottom of navigation block. This is the major question.
Take a look on this code:
I)
<div class="container">
<div class="row " style="background-color:#454545">
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="rounded_drop_shadow">
</div>
</div>
</div>
</div>
CSS:
.rounded_drop_shadow {
position: relative;
background: none repeat scroll 0% 0% transparent;
overflow:hidden;
padding:3px;
}
.rounded_drop_shadow:before {
content: "";
height: 100px;
position: absolute;
right: 10px;
top: -100px;
left: 10px;
border-radius: 50%/60px;
box-shadow: 0 0 60px rgba(0,0,0,0.3);
}
Now, this image shows, that shadow was added to the navigation block, but in extra space after.
http://i.imgur.com/rFuBnOB.png
But, my target is not extend block of navigation, just we have to put it above of navigation menu on the bottom. As if on top of it!
It should be like here:
http://i.imgur.com/ed3zWJL.png
Now, I found a solution, but I wonder if you take a look and will be able to give advice about this option:
Maybe, we should put block div with class="rounded_drop_shadow" inside another block div with class="shadow" (Both of them will still inside common_block) and play with position:absolute?
<div class="common_block">
<div class="col-md-2" style="background-color:#454545">
<a href="#" title="Omvana">
<img src="images/images.jpg" alt="Logo" />
</a>
</div>
<div class="col-md-8 border " style="background-color:#454545">
<ul class="h_menu">
<li class="active">
<a href="#" title="NEWS" >NEWS</a>
</li>
<li >
EVENTS
</li>
<li >
DOWNLOADS
</li>
<li >
TOUR
</li>
</ul>
</div>
<div class="col-md-2" style="background-color:#454545">
<div class="block_logo_2">
</div>
</div>
<div class="shadow">
<div class="rounded_drop_shadow"></div></div>
</div>
</div>
CSS
.box_center_shadow {
position: absolute;
top: 64px;
left: 0px;
right: 0px;
}
I wonder if somebody can tell me, if it is right way....or offer another options.
Thanks.