I have a Bootstrap .hero-unit box, and then I have a Fork me on Github ribbon that I am displaying in the top left corner of this box.
Usually a ribbon is placed in a corner of the screen, but in the case it isn't. So how do I hide the part of the ribbon that overflows its parent element?
The HTML:
<div class="hero-unit my-unit">
<a class="ribbon" href="#">Fork me on Github</a>
</div>
</div>
The CSS for the parent element:
.my-unit {
border-radius: 10px;
border: 1px solid #cfcece;
}
The CSS for the ribbon:
.ribbon {
position:absolute;
padding:5px 45px;
width:128px;
background-color:#555451;
color:#e5e5e5;
font-size:13px;
font-family:sans-serif;
text-decoration:none;
font-weight:bold;
-webkit-backface-visibility:hidden;
letter-spacing: .5px;
border:2px dotted #e5e5e5;
box-shadow:0 0 0 3px #383733,0 0 20px -3px rgba(0,0,0,.5);
text-shadow:0 0 0 #e5e5e5,0 0 5px rgba(0,0,0,.3);
margin-top:10px;
margin-left:-80px;
-ms-transform:rotate(330deg);
-moz-transform:rotate(330deg);
-webkit-transform:rotate(330deg);
transform: rotate(330deg);
}
Your HTML should be
<div class="container">
<div class="hero-unit my-unit">
<img class="ribbon"src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png">
</div>
</div>
Your CSS should be
.ribbon{
top: 0;
left: 0;
border: 0;
}
Demo : http://jsbin.com/piqinore/2/
Did you check the official github page to incorporate this ribbon , check it out at
https://github.com/blog/273-github-ribbons
Related
I just need to add a overlay effect on clicking the three dots. It should display a white background on top of that, transition should be from bottom.
I have attached the codepen link.
To preview your work...
Use this codepen link....
https://codepen.io/subin_s/pen/NVgLgx
HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<div class="projects">
<div class="image">
</div>
<div class="words">
<h2>BlogSpire</h2>
<i class="fas fa-ellipsis-v" id="moreinfo"></i>
<div class="clearfix"></div>
<p>Blogging web app created for the Engineering team at WeSpire.</p>
</div>
</div>
CSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Roboto';
}
.projects {
position:relative;
margin:2rem;
width: 335px;
height:400px;
background-color:#fff;
border-radius:5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.image {
position:absolute;
width:100%;
height:240px;
background-color:skyblue;
}
.words {
position:absolute;
top:240px;
padding:20px 20px 30px;
color:#333;
}
.words i {
position:absolute;
top:27px;
right:40px;
cursor:pointer;
}
.words h2 {
color:#008073;
}
.words p {
padding:13px 0 0;
}
JS
document.getElementById('moreinfo').addEventListener('click', projectInfo);
function projectInfo() {
}
You can add the overlay by adding a element commonly a div inside of your card, and setting its position to absolute. You can position it around using the top, left, bottom or right attributes.
To create the animation of the overlay comming from the bottom, you can create a simple css transition, changing the values of the top css attribute.
I've edited your code to create a small example on top of it. I hope it helps you.
const moreInfoElement = document.getElementById('moreinfo');
const overlay = document.getElementById('overlay');
moreInfoElement.addEventListener('click', projectInfo);
function projectInfo() {
overlay.classList.add('active-overlay');
setTimeout(() => {
overlay.classList.remove('active-overlay');
}, 3000);
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:'Roboto';
}
.projects {
position:relative;
margin:2rem;
width: 335px;
height:400px;
background-color:#fff;
border-radius:5px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
overflow: hidden;
}
.image {
position:absolute;
width:100%;
height:240px;
background-color:skyblue;
}
.words {
position:absolute;
top:240px;
padding:20px 20px 30px;
color:#333;
}
.words i {
position:absolute;
top:27px;
right:40px;
cursor:pointer;
}
.words h2 {
color:#008073;
}
.words p {
padding:13px 0 0;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1;
transition: all .6s;
}
.active-overlay{
top: 0;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="projects">
<div id="overlay" class="overlay">
Some text
</div>
<div class="image">
</div>
<div class="words">
<h2>BlogSpire</h2>
<i class="fas fa-ellipsis-v" id="moreinfo"></i>
<div class="clearfix"></div>
<p>Blogging web app created for the Engineering team at WeSpire.</p>
</div>
</div>
For some reason I have a parent div called banner which contains a number of child divs, however in my css styles sheet I can't seem to move any elements especially the "CRAFT412" logo image to my desired position within the banner. I've tried using left/right/top/bottom to move these elements but nothing seems to budge them. If anyone could help me here I'd appreciative it.
Here is my HTML for a page on my site
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip_box"></div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_box"></div>
<div id="teamspeak_box_2"></div>
<div id="teamspeak_text">
<p>TEAMSPEAK<P/>
</div>
<div id="teamspeak_image">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
</div>
Also here is my CSS for the same divs
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {
background:#EEEEEE;
background-repeat: no-repeat;
background-attachment: fixed;
}
#wrapper {
width: 1750px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1.5px 2px 0px;
border: 1.5px solid #E0E0E0;
color: #E0E0E0;
}
/*TOP BANNER SECTION*/
#banner { height:100px; }
#logo {}
#ip_box {
width:200px;
height:43px;
background:#212121;
border-radius: 5px;
box-shadow: 1px 1px 5px;}
#ip_text {
color: white;
font-size: 15px;
}
#teamspeak_box {
width:159px;
height:43px;
background:#212121;
border-radius: 5px;
box-shadow: 1px 1px 5px;
}
#teamspeak_box_2 {
width:43px;
height:43px;
background:#313131;
border-radius: 5px 0px 0px 5px;
}
#teamspeak_text { color: white; }
#teamspeak_image {}
Give the parent div a property :
Position:relative;
Also give the property to child div:
Position:absolute;
Now you can change the places of child div inside the "BANNER" div. by using TOP , BOTTOM, RIGHT, LEFT
I want to display my subtitles with unique style. So we use the following css code for style
.title-1 {
border-bottom: 1px solid #4db2ec;
margin-bottom: 10px;
padding-bottom: 4px;
position: relative;
font-size: 16px !important;
color: #FFF }
.title-1 > span {
background: #4db2ec;
width: auto;
padding: 4px 7px }
Now I am insert advertisement block with following html code with wrap text.
<div style="float: right; margin-left: 20px;">
<img src="http://domain.com/ad.jpg" height="600" width="160">
</div>
<h2 class="title-1"><span id="location">My Sub Title</span></h2>
now my title style is operlap in my advertisement block. how to solve this?
Here is a jsFiddle: http://jsfiddle.net/f025d5Lh/
Simplest is to add z-index:-999; to .title-1, this will push down the relative div below any div
Demo
CSS
.title-1 {
border-bottom:1px solid #4db2ec;
margin-bottom:10px;
padding-bottom:4px;
position:relative;
font-size:16px !important;
z-index:-999; /* only change */
color:#FFF
}
.title-1 > span {
background:#4db2ec;
width:auto;
padding:4px 7px
}
Is it possible to do a CSS border within a border?
Here is what I'm trying to do: screenshot
I would like to avoid extra html elements and also avoid using images because of retina devices. If only I could put a CSS outline on only one side of the element I would be golden, but this doesn't seem to be possible.
Edit:
Here's what I've ended up with from the many excellent solutions that were posted - thank you!
http://jsfiddle.net/kisabelle/9umMr/1/
HTML
<footer>
<p>Example</p>
</footer>
CSS
footer{
border-top: 15px solid #393734;
position: relative;
}
footer:after{
content:"";
border-top: 2px #989593 dotted;
position:absolute;
top: -8px;
left:0;
width:100%;
height:0;
}
Using the pseudo-element :after to add a second border (instead of box-shadow) allows support in IE8 and up.
See the jsfiddle for a second example in which you can control the space between the dots in the dotted border using the CSS content attribute instead of a border.
A couple of options:
Use border + outline
Use pseudo elements
Use multiple box-shadows
Use border-image
Googling any of those brings up loads of resources
Now that I've seen the screen grab, I reckon a combination of border top plus some box-shadows is your answer: http://jsfiddle.net/ne9nm/
Edit: Update the JSFiddle to show two possible solutions; one using box-shadows, and one using a pseudo element.
The HTML:
<div id="example-1">Example 1</div>
<div id="example-2">Example 2</div>
The CSS:
div {
background:rgb(100, 150, 100);
width:100px;
height:100px;
padding:30px;
margin:20px;
}
#example-1 {
border-top:1px white dotted;
box-shadow: inset 0 5px 0 grey, 0 -5px 0 grey
}
#example-2 {
border-top:10px solid grey;
position:relative;
}
#example-2:before {
content:"";
position:absolute;
width:100%;
height:0;
border-top:1px white dotted;
top:-5px;
left:0;
}
you can use box-shadow from css with inset and :after or before like this
Demo :http://jsfiddle.net/uXpaX/1/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
figure:after{
position:absolute;
top:-2px;
left:0;
height:1px;
width:100%;
content:'';
border-top:4px dashed white;
}
Or you can just use box-shadow and border
Demo:http://jsfiddle.net/uXpaX/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: rgb(140, 179, 140);
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black;
}
html
<figure>
<figcaption>Coustomer Care</figcaption>
<menu type=list>
<li>Billing</li>
<li>Shipping & Tracking</li>
<li>Returns & Exchanges</li>
<li>Products & Sizing</li>
<li>Contact</li>
</menu>
</figure>
or use an other box-shadow trick like this
Demo:http://jsfiddle.net/uXpaX/2/
body{
background:#aaa;
}
figure{
width:250px;
height:300px;
margin:20px auto;
background: black;
padding:20px;
border-top: 2px dashed white;
position:relative;
box-shadow: 0 -10px 0 black,inset 0 10px 0 black,inset 0 100em rgb(140, 179, 140);
}
hello everyone i am trying to create
a div that will Functioned as the bottom border of
this form, like this:
The problem is that it only works if I use
margin-top and i dont want to use that.
this is what i am getting now:
my css:
#form_div
{
position: absolute;
top:67px;
left:450px;
height:550px;
-moz-box-shadow: 2px 3px 45px #000000;
-webkit-box-shadow: 2px 3px 45px #000000;
box-shadow: 2px 3px 45px #000000;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#bottum_border
{
border-bottom:1px solid red;
cursor: e-resize;
margin-top: 43px;
}
my html:
<div id="form_div" class="black_background_solid" >
<div id="form_headline" class="light_black">Contact Us</div>
<div id='n_1_conteiner' class='field_conteiner'>
<div id='n_1_lbl' class="field_name">Name:</div>
<input id='n_1_textbox' class='textbox gray white_text' type='text'/>
<a id='n_1_edit_btn' class='edit_button'>Edit</a>
<a id='n_1_drop_btn' class='drop_button'>Drop</a>
<div id='n_1_border' class='fakeHr line_border_color_black'></div>
</div>
<div id='n_5_conteiner' class='field_conteiner'>
<div id='n_5_lbl' class='field_name'>Message:</div>
<textarea id='n_5_tbx' class='text_area gray white_text' rows="2" cols="30">
</textarea>
<a id='n_5_edit_btn' class='edit_button'>Edit</a>
<a id='n_5_drop_btn' class='drop_button'>Drop</a>
</div>
<div id='results_div'>
<div id='submit_btn' class="button red_gradient" onclick="Validate()">
Submit</div>
</div>
<div id='bottum_border'></div>
</div>
exact codes pasted in fiddle http://jsfiddle.net/z982S/
Try removing height (Use padding/margin instead) from: #form_div & add following to #bottum_border
#bottum_border
{
position:relative;
bottom: 0;
}
#bottum_border
{
border-bottom:1px solid red;
cursor: e-resize;
position: absolute;
bottom: 0px;
width: 100%;
}
Check fiddle http://jsfiddle.net/Zd4fr/
If you want something like 1st image then Why don't you use border-bottom directly to the form_div?
#form_div
{
border-bottom:1px solid red;
}
You need something like this:
#form_div
{
position: relative;
}
#submit_btn
{
position: absolute;
bottom:0;
}
This positions the button to the bottom of the form.