Related
I have the following css code to make sure that the display sentence is not more then 2 line, if so it will replace the rest of the word to "..."
.bell-notification-max-words-display{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
This working fine for chrome, safari and mozilla. However, it's not working for IE. When I inspect the element, error showing like below:
Does anyone know how can I make it work for IE?
Have you try all these?
display: -moz-box;
display: -webkit-box;
display: box;
display: -ms-flexbox;
I think the only safe cross-browser solution is to use javascript for line clamping. I've used Clamp.js once and I remember it being easy to use and working very well. You can read some more about the whole "line clamping issue"
here.
The basic usage of Clamp.js in your case would be something like the following
$clamp(myText, {clamp: 2});
Where myText is the element you want to line clamp and 2 means two lines.
The vendor prefix -webkit means that this is specific to the webkit engine which IE does not use. That's why it doesn't work.
You can get the desired result with a bit of line-height tweaking. - Read more about line-height - and by also using overflow: hidden;
Setting overflow to hidden means the content will be trimmed if it exceeds the dimensions of the div:
Working example:
.parent {
font-size:16px;
height: 36px; /* 2x "font-size" +4px clearing */
line-height: 36px; /* should match your parent div height */
width: 90%;
overflow: hidden;
margin-top: 20px;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: normal; /* reset line height here it here */
}
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, cu ancillae expetendis ius, pro reque laudem facilisis in, dicta euismod qui eu. No pri graecis similique, ei vim nobis veritus argumentum, platonem torquatos vituperata eum eu. Mel purto eros legendos id, saepe laudem at qui,
te eum semper interesset. Has id admodum deleniti, eu sumo iisque noluisse ius, vix facer partiendo temporibus ut. In civibus consetetur cum, quo atqui omnium periculis ne. Vim nullam nemore ut.
</div>
</div>
There also another method in which you use a reset html textarea element.
Working example:
textarea {
all: unset;
width: 100%
}
.sample {
overflow: hidden;
max-width: 80%;
overflow: ellipsis;
}
<textarea class="sample" rows="2">
Lorem ipsum dolor sit amet, cu ancillae expetendis ius, pro reque laudem facilisis in, dicta euismod qui eu. No pri graecis similique, ei vim nobis veritus argumentum, platonem torquatos vituperata eum eu. Mel purto eros legendos id, saepe laudem at qui,
te eum semper interesset. Has id admodum deleniti, eu sumo iisque noluisse ius, vix facer partiendo temporibus ut. In civibus consetetur cum, quo atqui omnium periculis ne. Vim nullam nemore ut.
</textarea>
Unfortunately neither methods support ellipsis or "..."
I don't think there are any "non-hacky" methods of combining ellipsis and overflow using CSS alone unless you use hacks or scripts.
An example of such hacks is to use pseudo-elements (this only works if the text is justified)
.sample {
max-width: 80%;
overflow: hidden;
position: relative;
max-height: 2.2em;
text-align: justify;
padding-right: .75em;
}
.sample:before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
<div class="sample">
Lorem ipsum dolor sit amet, cu ancillae expetendis ius, pro reque laudem facilisis in, dicta euismod qui eu. No pri graecis similique, ei vim nobis veritus argumentum, platonem torquatos vituperata eum eu. Mel purto eros legendos id, saepe laudem at qui,
te eum semper interesset. Has id admodum deleniti, eu sumo iisque noluisse ius, vix facer partiendo temporibus ut. In civibus consetetur cum, quo atqui omnium periculis ne. Vim nullam nemore ut.
</div>
I swear I have checked quite thoroughly before posting this!
I am trying to center a FIXED div inside its parent div.
<div id="main">
<div id="fixed"></div>
</div>
CSS:
#main {
position: relative;
min-width: 400px; /* so it's fluid*/
background: #fff;
height: 100vh;
}
#fixed {
position: fixed;
/* center the div */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
min-height: 10em;
width: 300px;
top: 0;
background-color: #af0000;
}
I wonder if it s possible to do with pure CSS. I can calculate the remaining space, divide it by two and change LEFT and RIGHT (i.e left: 6px; right: 6px; etc..) with JQuery but I'd like to avoid that if possible.
http://jsfiddle.net/PvfFy/980/
CSS calc() and vw (viewer width)
We can calculate measurements in CSS using this powerful addition to CSS, and combined with vw (and also vh) we can position elements quite precisely and responsively.
#main {
height: 200vh; /* force scrolling for demo */
}
#fixed {
position: fixed;
width: 300px;
height: 100px;
top: 50px;
left: calc( 50vw - 150px ); /* this is the magic */
background: blue;
}
<div id="main">
<div id="fixed"></div>
</div>
Since question was clarified (sorry for not paying closer attention)
Using position: sticky:
...will behave just like a relatively positioned element until the viewport scrolls...
Unfortunately it is (June 25, '17) less than well supported, but allows us to use margin: 0 auto; centering since #fixed is of a fixed width.
body {
margin: 0;
}
#main {
min-width: 400px; /* variable width */
width: 70vw; /* for demo */
height: 200vh;
background: rgba( 0, 255, 0, 0.2 );
}
#fixed {
position: sticky; /* this is the magic */
margin: 0 auto; /* along with this */
width: 300px;
height: 100px;
top: 50px;
background: cadetblue;
}
<div id="main">
<div id="fixed"></div>
</div>
#main {
position: relative;
min-width: 400px;
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#fixed {
position: fixed;
min-height: 10em;
width: 300px;
background-color: #af0000;
}
<div id="main">
<div id="fixed"></div>
</div>
Edited answer.
I got this idea from Fred's answer. if it brings you closer go upvote his answer and not this one.
This doesn't seem to work in the viewer below unless you use fullscreen for some reason.
Maybe this will bring you closer.
You #main needs position: relative
And your #fixed needs position: sticky As well as top: 25% bottom: 25% left: 50% right: 50%
See example below:
/* start eesential CSS */
#main {
display: inline-block;
width: 30%;
min-height: 300vh;
height: auto;
position: relative;
float: right;
}
#fixed {
margin: 0 auto;
position: sticky;
top: 25%;
bottom: 25%;
left: 50%;
right: 50%;
}
/* end eesential CSS */
/* Start style fluff */
body {
margin: 0 auto;
}
#main {
background: darkred;
}
#fixed {
max-width: 100%;
height: 300px;
color: #999;
background: darkblue;
overflow-y: auto;
}
#fixed *,
#none-fixed * {
padding: 25px;
color: #999;
}
/* End style fluff */
<div id="main">
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
te ius. Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque
molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet,
an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus,
alia mutat te ius.
</p>
</div>
<div id="fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lore molestiae. Pro mundi nemore at, tation
</p>
</div>
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
a deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium
duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae
cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. te ius.
</p>
</div>
<div id="none-fixed">
<p>Lorem ipsum dolor sit amet, dolore persius at nam, ne audiam meliore quo. Vis no lobortis referrentur, ex per modo epicuri oportere. Ad primis pertinacia deterruisset eam Lorem ipsum dolor sit amet, an utinam dolorum vix, usu no sumo quaeque molestiae.
Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat te ius. Lorem ipsum dolor sit amet, an utinam
dolorum vix, usu no sumo quaeque molestiae. Pro mundi nemore at, tation ceteros repudiare ut eos. Usu latine ponderum deseruisse no, has doctus propriae cu. Et vim unum saepe, an commune adversarium duo. Mea ea legere doming probatus, alia mutat
te ius.
</p>
</div>
</div>
Here is a slightly silly (but working well and, unlike all the mentioned above pure CSS solutions- this one is a cross-browser one) solution with JQuery involved:
// getting initial data
var fixed = $('#fixed').width();;
var main = $('#main').width();
// getting left offset
var leftSpace = $('#main').offset().left;
// caltucating difference, dividing by two and adding left margin
var diff = (main - fixed) / 2 + leftSpace;
// updating CSS
$('#fixed').css('left', diff);
http://jsfiddle.net/PvfFy/983/
I want to add animated or gify image(Doctor treating pateint) on my website background, can anyone please suggest me with some solution, its a single page website: http://bighealth.co.in/
you can do like this:
change the url to the gif you want
change background-size: cover; to modify the way you want to display
body{
background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/dscovrepicmoontransitfull.gif');
/* background-size: cover; */
}
If you want "high definition" animation, you need to add video as a background, if you mean this, then you need to provide the video in 3 types (.mp4, .ogg (or .ovg), webm), actually .mp4 could be enough, but will not work 100% in all brwosers, anyway here is the code:
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
#media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.mp4" type="video/mp4">
<source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.ogv" type="video/ogg">
<source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.webm" type="video/webm">
</video>
</div>
<div class="content">
<h1>Full screen HTML5 video background</h1>
<p>Lorem ipsum dolor sit amet, vix te quidam commodo placerat. Mei ne dicunt minimum disputationi, purto everti adolescens id cum, quis veritus cotidieque eum ex. Ea eirmod atomorum posidonium sed, splendide dissentiunt an mel. Dolorem suavitate voluptatibus pro no. No duo conceptam cotidieque.</p>
<p>Pro novum argumentum ad. Vix at inani civibus, congue veritus probatus ad vel. Eam ne quis omnesque euripidis, pri ea dicat etiam ponderum. At sit harum dolor persius, eos vocent adipisci ad, magna movet audiam pri no. Erant labores incorrupte id sit, constituto scripserit theophrastus quo no.</p>
<p>Nam tacimates laboramus cu. Graeco tritani mel no. Iriure constituam mea te, quo integre salutatus ne. Case tota dicam te eam, quis minim assentior ei cum, sea eu verterem liberavisse. Modus officiis fabellas ea eos, in vis omittam ocurreret. Ea labitur assentior vix.</p>
<p>Case tation integre sit an. Te cum mollis vocent similique, docendi volumus eu nam. Erant euismod partiendo nec ei. Vel malorum liberavisse cu. Fabulas efficiantur in duo.</p>
<p>Ad qui brute fabulas rationibus, ex virtute omnesque vituperata vix. Ne case verterem probatus sit. In eam nulla tation debitis, has te alterum equidem definiebas. At summo facilisis eum. Vel ad nostro discere oportere, ad quod vitae officiis quo.</p>
<p>Case tation integre sit an. Te cum mollis vocent similique, docendi volumus eu nam. Erant euismod partiendo nec ei. Vel malorum liberavisse cu. Fabulas efficiantur in duo.Ad qui brute fabulas rationibus, ex virtute omnesque vituperata vix. Ne case verterem probatus sit. In eam nulla tation debitis, has te alterum equidem definiebas. At summo facilisis eum. Vel ad nostro discere oportere, ad quod vitae officiis quo.</p>
</div>
(click full page version to see the code running well, if run snippet not worked here, or visit the original source here)
The source of this code and more description provided here: https://slicejack.com/fullscreen-html5-video-background-css/
This works in FF/Chrome/Opera, and IE 10+, but not IE9; I'm looking for an IE9 solution
The following CSS will to make a set of divs, span, or p tags self-organize into neat columns that can be scrolled horizontally (Only works in WebKit enabled browsers).
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
Here is the example:
$(document).ready(function() {
$(".RightArrow ").click(function() {
$(".columns").animate({
scrollLeft: '+=500'
}, 100);
});
$(".LeftArrow ").click(function() {
$(".columns").animate({
scrollLeft: '-=500'
}, 100);
});
}); //end script
body {
font-family: arial;
}
.columns {
overflow: hidden;
width: 500px;
border: 1px solid #000;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
padding: 0 20px;
text-align: left;
height: 500px;
overflow: hidden;
position: relative;
}
.notsectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
.arrows {
width: 500px;
}
.RightArrow {
float: right;
cursor: pointer;
}
.LeftArrow {
float: left;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<p>
<a class="">
<h2>
<span class="">1</span>
NUM 1
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">2</span>
NUM 2
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">3</span>
NUM 3
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">4</span>
NUM 4
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">5</span>
NUM 5
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">6</span>
NUM 6
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
</div>
<!--columns-->
<div class="arrows">
<span class="LeftArrow"> Previose </span> <span class="RightArrow"> Next </span>
</div>
https://jsfiddle.net/n5qh89vw/
The reason I want it to work this way is I have straight output from a DB into a list of <div> s and I would like to avoid having to make it more complicated and have to have the output count the number of data items then form the markup into inline divs or tables (as in x number cells will make y columns with rows of 4) as I want to keep this as simple as possible.
Is there a way to get this to work with IE?
According to Can I Use, Multiple column layout is supported in IE 10+. If you need to support older versions of IE there is a CSS multicolumn polyfill (found in the Resources tab at Can I Use).
Now that you've updated your question to specify that you need this for IE9, here is a full example using Adam Wulf's Columnizer jQuery Plugin:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/path-to-local-file/jquery.columnizer.min.js"></script>
<script>
$(function(){
$('.wide').columnize({width:400});
$('.thin').columnize({width:200});
});
</script>
<style>
.column p, .column h1{ padding: 5px; }
body { font-size: 9pt; }
#wrapper { margin: 0px 100px; }
.wide, .thin { clear:both; }
</style>
</head>
<body>
<div id="wrapper">
<div class="wide">
<h1>Lorem ipsum ne justo</h1>
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
<p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
<h1>Tempor essent appetere</h1>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
<p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
<h1>Soleat civibus in pri</h1>
<p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
</div>
<div class="thin">
<h1>Lorem ipsum ne justo</h1>
<p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
<p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
<h1>Tempor essent appetere</h1>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
<p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
<p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
<h1>Soleat civibus in pri</h1>
<p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
<p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
<p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
<p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
<p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
</div>
</div>
</body>
You'll need to download that file since there's no CDN for it so don't forget to change path-to-local-file to the actual location of the file.
For others who only need to support 10+, the problem here is that you're only using the vendor-prefix versions of the CSS. You need to include the normal version as well:
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-fill: auto;
column-width: 300px;
column-gap: 40px;
This worked for me in IE11:
$(document).ready(function() {
$(".RightArrow ").click(function() {
$(".columns").animate({
scrollLeft: '+=500'
}, 100);
});
$(".LeftArrow ").click(function() {
$(".columns").animate({
scrollLeft: '-=500'
}, 100);
});
}); //end script
body {
font-family: arial;
}
.columns {
overflow: hidden;
width: 500px;
border: 1px solid #000;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-fill: auto;
column-width: 300px;
column-gap: 40px;
padding: 0 20px;
text-align: left;
height: 500px;
overflow: hidden;
position: relative;
}
.notsectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
.arrows {
width: 500px;
}
.RightArrow {
float: right;
cursor: pointer;
}
.LeftArrow {
float: left;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<p>
<a class="">
<h2>
<span class="">1</span>
NUM 1
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">2</span>
NUM 2
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">3</span>
NUM 3
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">4</span>
NUM 4
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">5</span>
NUM 5
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
<p>
<a class="">
<h2>
<span class="">6</span>
NUM 6
</h2>
<h3>200 Broadway</h3>
<p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
</a>
</p>
</div>
<!--columns-->
<div class="arrows">
<span class="LeftArrow"> Previose </span> <span class="RightArrow"> Next </span>
</div>
The answer is simple and is NO. If you don't want to put some logic in it and divide the results into specific DIVs then you won't be able to get the desired result. sorry :(
I need to create a curved, gradient box shadow in the shape of an ellipsis, which needs to be horizontally centered behind a div and offset to the bottom.
This is my markup:
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="img/trucircles-img.jpg" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>
do you want a shadow of 50% width and in the middle of the div.about-tru, check the fiddle I've created -
http://jsfiddle.net/nw6vzd3L/
Something like this ?
.about-tru{
box-shadow : 0 0 20px;
border-radius: 6px;
margin : 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="http://tododepende.com/wp-content/uploads/2013/09/lorem_ipsum.gif" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>
As far as I know you can't make an actual css-shadow in the shape of an ellipsis (which as far as I understand is what you want to achieve).
But you can fake it very well with a gradient background - for example on a pseudo-element:
CSS
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
Obviously you can adjust the top, left, right and bottom values to position the shadow wherever you want. Also note that you may need browser-prefixes for the gradient background to work if legacy browser support is an issue.
HTML
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
.round_shadow {
position: relative;
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
z-index: -1;
position: absolute;
top: 80%;
right: 10%;
left: 10%;
bottom: -30%;
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
Edit
Ok, so elliptical was not not desired. To make a rectangular shadow I can think of two solutions, the primary difference between them consists in the options you have for positioning...
The first and probably simplest would be to just use a box-shadow with a negative spread (4th parameter):
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 20px 10px -20px rgba(0,0,0,.3);
}
.centered_shadow {
border-radius: 5px;
border: 1px solid #f00;
background: #fff;
padding: 1em;
box-shadow: 0 60px 10px -40px rgba(0, 0, 0, 0.3)
}
<div class="centered_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>
The second method is basically the same as my suggestion for an elliptical shadow (which may give better control of the shadows position in some situations), except you give the pseudo-element a shadow instead of a gradient background, so:
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
.round_shadow {
border-radius: 5px;
position: relative;
border: 1px solid #f00;
background: #fff;
padding: 1em;
}
.round_shadow:after {
display: block;
content: "";
z-index: -1;
position: absolute;
top: 80%;
right: 25%;
left: 25%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 30px 50px rgba(0,0,0,.3);
}
<div class="round_shadow">
<p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
<p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
<p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>