I've set my self a challenge to develop a website without using a single image. I'll mainly use icon fonts, but for this particle graphic, I thought I can use a div or other element and than style it via css e.g. give borders or something... but I discovered that it wasn't as easy as I thought and I can't achieve it.
Here is what I need to get as a final result:
I'm interested in diagonal lines, ignore the background. Is there a way to replicate such lines with help of html or css?
You can do what you ask using css background-image: repeating-linear-gradient()
Lea Verou has a great gallery: http://lea.verou.me/css3patterns/
You can modify diagonial-stripes pattern and get what you want.
Hope this helps you get started..!! Fiddle Demo here..
HTML
<body>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</body>
CSS
.myDiv {
background-color: none;
border: solid 2px #AAA;
margin: 30px;
height: 5px;
-webkit-transform: rotateZ(115deg); // Chrome
-moz-transform: rotateZ(115deg) // Mozilla Firefox
}
Try this,
http://www.patternify.com/
U can make patterns just like that here, and convert it to CSS to use for your background.
Related
I am learning HTML/ CSS and JS. I am making my first website and I have a problem. How can I change the background in the container under the pictures, to my color. On the internet I only find bg-secondary etc and I need for example #82b5cf.
I also have a question, I want to put the text in the middle of the picture, now it is under the photo and I can't do anything with it, for a test I changed the font and there is no reaction. Thank you very much for your help :)
main {
.aboutus-card-title {
font-size: 30px;
}
}
<main>
<section id="UAV" class="...."> //#82b5cf
<div class="container ">
<div class="row gx-4 ">
<div class="col-sm ">
<img class="uav-photo" src="img/introduction_1.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
<p class="aboutus-card-title">Introduction</p>
</div>
<div class="col-sm">
<img class="uav-photo" src="img/UAV_features_2.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
<p class="aboutus-card-title">Elements</p>
</div>
</div>
</div>
</section>
</main>
For your first question, it sounds like you're wanting a fallback color behind your image. Here's an example how to do this from: https://css-tricks.com/css-basics-using-fallback-colors/
header {
background-color: black;
background-image: url(plants.jpg);
color: white;
}
Basically you first create your fallback background-color, then overwrite it with your background-image. If the background-image doesn't load, the background-color will stay.
For your second question about the text with the .aboutus-card-title class, you have your CSS selectors messed up. This is a good source for learning about selectors: https://css-tricks.com/how-css-selectors-work/. If you want to select that class within main your selector should look like this:
main .aboutus-card-title{
font-size: 30px;
}
In this case, you can probably leave off main and just have this:
.aboutus-card-title{
font-size: 30px;
}
The only reason you would want to use the main selector here is if you wanted to style the .aboutus-card-title class differently if it's within main compared to somewhere else.
These are two questions. I'd split them into two separate posts, makes it a bit easier to search.
For changing the background you can use:
background-color: #82b5cf;
or
background: #82b5cf;
For the centering of text on an image, you could use a combination of position, top, left and transform:
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
My issue is that while the a tag is in the container the ":hover +" does not work. If I move the a tag outside the container it works fine. Using a basic div instead of the bootstrap container produces the correct result. Is there something that blocks this from happening in the bootstrap libraries?
HTML :
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
test
</div>
<div class="col-sm-4">
<div class="info">
<h1>Info</h1>
<div class="info-box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS :
.
info{
text-align:center;
}
.info-box{
width: 70%;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.one, .two{
display: none;
}
a:hover .container
> .row > .col-sm-4
> .info > .info-box
>.one{
display: block;
}
Codepen
Because the element that you want to show when you hover over the tag is NOT a child of the element your are hovering over, it's not going to be possible to target the element via CSS.
Your best bet is to use some very simple javascript/jquery.
Since you are using Bootstrap, I'm going to assume you are loading jQuery.
Here's a codepen: http://codepen.io/anon/pen/WrMPXY
$(document).ready(function(){
$('.test').hover(function() {
$('.one').toggle();
});
});
Let's look at what the jQuery is doing. The first line simply says "when the page is loaded, do this..."
In the second line, we start by grabbing the element with a class of "test". You could also target something with an id using $('#test'). Now that we have that element, we want to tell it to do something when we hover over it.
The third line starts with the element we want to do something with, in this case the element with a class of "one". The "toggle" function is a simple shortcut to hide/show. You also could use the hide() function, show() function, or fun things like slideUp(), slideDown(), or slideToggle().
That's it. Let me know if you have anymore questions regarding the jQuery. I have no idea how familiar you are with it so I apologize if this is all obvious.
The only CSS you need is a default state of "display:none;" on the elements you want to hide and show via jQuery.
If you looking for only css solution, you have to col-sm-8:hover
.col-sm-8:hover + .col-sm-4 > .info > .info-box > .one {
display: block;
}
in this case you might reduce width of col-sm-8 block. I just added float to this class, you can have another solution!
.col-sm-8 {
float: left;
}
jsfiddle-link
I have this CSS class
.background-color-blue {
background-color: #00C0FF;
}
and I want to be able to use it on some elements if needed.
I now it is not very semantic, but it is used for HTML template that is meant to be easy to use, small in size, and universal.
I want to be able to use it on elements like some panels, sidebars, modals, top-bar menu , or whatever I want
of course it works, but only for divs that do not have background-color already specified.
in this case:
<div class="modal background-color-blue"></div>
.modal has already specified bg color to #fff. now it does not work - it stays white.
I have found two solutions for that:
.background-color-blue {
background-color: #00C0FF !important;
}
and
div.background-color-blue {
background-color: #00C0FF;
}
I am not sure about these... which solution is better? Or is there any other solution that would work better?
I think this method:
.modal.background-color-blue {
background-color: #00C0FF;
}
is not good since I would have to do it with any similar element.
and
<div class="modal">
<div class="background-color-blue">
</div>
</div>
also isn't good since modal already has some padding.
Just use !important it will help to override
.background-color-blue {
background-color: #00C0FF !important;
}
Take a look at this : when-using-important-is-the-right-choice
If you think that modal will be able to have different colors, i guess you'd like this (ITCSS - BEM inspired). This will help you to stay at a low specificity rate, preventing you to have some problems with future classes or have to overwrite them.
Exemple here :
http://codepen.io/AxelCardinaels/pen/ZGVKzp
HTML :
<div class="container">
<div class="modal modal--grey">
<h1 class="modal__title"> Modal Title</h1>
<p class="modal__text">Hello this is the content of the modal !</p>
</div>
</div>
CSS :
/*Base Class */
.modal{
width:40%;
margin:0px auto;
padding:20px;
text-align:center;
border-radius:10px;
box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}
/*Attribute classes for the modal, just make a choice in your HTML ! */
.modal--grey{
background:rgb(220,220,220);
border:1px solid rgb(200,200,200);
}
.modal--blue{
background:rgb(65,105,225);
border:1px solid rgb(58,95,205);
}
The proper usage is
! important
Normally it should have been blue background. Perhaps something else that is preventing the elements of blue.
But don't forget that; the last !important taken into account.
Ok, so I'm brand new here (and to programming) and I'm not even sure If the questions I'm going to ask is worded correctly or makes sense, but here it goes.
I am working on a bootstrap theme for a client, I am trying to change the background colors. I do not want the page to be all the same background color. I would like certain rows to have a different background color from the rest of the page. How can I accomplish this? I've tried adding unique tags to the containers I'm working on with the background color I want, but no matter what I do NOTHING is changing. I know this is something simple and I just need a simple explanation as to how to make this work! HELP!
You have some options to do that.
For the background in the divs:
You can do:
<head>
<style>
body{
background-color: red;
}
.backg1{
background-color: blue;
width: 100%;
padding: 10px;}
.content{
background-color: white;
margin: 10px;
width: 80%;
height: 100px;}
</style>
</head>
<body>
<div class="backg1">
<div class="content">
</div>
</div>
</body>
Is only work with the css properties. You need paste the code to try help you.
Add class="bgColor"
Like:
<div class="bgColor">
....
</div>
Your css:
.bgColor{
background: #dadada;
}
Give all your styles in custom_style.css, in which you can add CSS properties for elements. Inside your custom_style.css you give background color you want.That's it, Its just the work of CSS. No other process or procedure to .
consider #Page 1
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_home">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Consider #page 2
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_about">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Here goes the working of CSS "Custom_style.css" has
#Web_page_home { background-color:red; }
#Web_page_about{ background-color:green; }
The output will b the Page 1 backgorund will b in red and another page 2 will be in green.
if you didn't understand still i will attach fiddle.