I'm having trouble positioning last-child of inline-block horizontal scrolling site. In firefox everything looks ok, but in Chrome last child of articles is somehow pushed down, for about 18px. Of course, I've tried to separately assign the "vertical-align:top" to last element, but still no {good} result ...
Here's my site: http://rup.fiser.biz/braunova/category/scenography/
.post {
height: 351px;
float: left;
display: inline-block;
}
remove float: left; as you have display: inline-block (float or display, can't have both as far as I know)
.site-content article {
margin: 0 20px 0 0;
padding: 0;
}
and remove margin if you want to move the las element next to others
Related
I am trying to create an animation of a dashed line over an arbitrary (e. g. not known in advance, not necessarily constant) background - let's say, a photograph. I want the dashes to be thick and rounded at the ends. I also want them to be outlined with a different color, so they are visible regardless of the background.
My initial googling gave me this example. From what I understand, first it draws "anti-dashes", so to speak, of the background color, then animates a solid line being drawn under them. Obviously, that won't do what I want: no way to make the ends rounded, no way to outline each entire dash, and, most importantly, it requires a constant background.
I tried a different approach: drew the required curve, with all its thickness, roundness, shadows etc., then used an animated solid line as a visibility mask. Basically, it does what I want, except for possible self-intersections of the curve (see the "artifact" at the self-intersection point on the animation below).
Is it possible to fix that somehow? (just in case, the same code at codepen)
function init()
{
//some "magic numbers" to make a smooth curve
var to_draw = "M23.742,10.709 c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631 c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201 c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354 c19.17,28.697,49.512,49.927,78.596,67.591";
//set the same base line for all three paths
["line", "shadow", "hide"].forEach(
(element, index, array) =>
{
document.getElementById(element).setAttribute('d', to_draw);
});
//get the lenght of the resulting curve
var path = document.querySelector('.line');
var length = path.getTotalLength();
//set the dash length to cover the entire curve
//
//set the offset so that our long dash is initially off the curve,
//then it slides along the curve when the CSS animation plays
var elem = document.querySelector(".hide");
elem.style.strokeDasharray = length;
elem.style.strokeDashoffset = length;
}
.base
{
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 10, 20;
fill: none;
}
.line
{
stroke: rgba(0, 255, 0, 0.7);
stroke-width: 5;
}
.shadow
{
stroke: rgba(0, 0, 0, 0.7);
stroke-width: 7;
}
.hide
{
stroke: white;
stroke-width: 8;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 0;
stroke-dashoffset: 0;
animation: dash 3s linear alternate infinite;
fill: none;
}
#keyframes dash
{
to
{
stroke-dashoffset: 0;
}
}
<!DOCTYPE html>
<html>
<head></head>
<body onload = "init()">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<circle cx="230" cy="150" r="40" stroke="black" stroke-width="3" fill="red" />
<mask id = "theMask">
<path id = "hide" class = "hide" />
</mask>
<path id = "shadow" class = "base shadow" mask = "url(#theMask)" />
<path id = "line" class = "base line" mask = "url(#theMask)" />
</svg>
</body>
</html>
To deal with crossings, you will need to break the line up into two or more sections and animate them sequentially.
So in your case, you would need two lines. One from the start of the path, that goes past the intersection. Then a second one that starts where the first one ends and crosses back over the first one.
Your case is complicated a little further by the fact that you have dashed lines. If you are not careful, you will be able to see where the second line begins, because the dash pattern will restart abruptly. To deal with that you will either have to:
Split the line at a length that coincides with a point where the dash pattern repeats, or
Give the second line a dash offset that matches the point in the dash pattern that the first line was when it ended.
here my test
https://jsfiddle.net/Artenis/nozv1nsf/#&togetherjs=yjibGnfDFM
could you please tell me where is my error
i would like the div which contain text (black opacity) is centered horizontally and vertically in relation to the background-image. The div with background-color black opacity won't take the total height but just the padding of div of text.
this same div must be take all the width of the background.
I use
display:flex; justify-content:center; and content-align:center;
so far it has always worked, but not here.
This should fix your problem.
.moncontenu{ color: rgb(255, 255, 255); text-shadow: 2px 4px 2px rgb(0, 0, 0); font-size: 33pt;width:100%; padding: 15px 0px !important; align-self: center;}
(added align-self: center;)
I have many spans that are one next to each other and I'd like to add some linear-gradient effect - so the first one has background-color: $a, the last one background-color: $b and the spans between the "transition color from $a to $b". If I'm not making any sense, this image will help you:
I tried with lighten(), but it only uses one color.
Here's the current SCSS:
$starting_color: #177DEF;
$ending_color: #2FF0D5;
$elements: 51;
#for $i from 0 to $elements {
span:nth-child(#{$i}) {
height: random(260) + px;
background-color: lighten($starting_color, $i);
}
}
Whole fiddle on Codepen
How can I create this "effect"? Possible with some step parameter (step count = all spans)
This is quite lengthy, but it works:
//$blue: #177DEF;
$firstR: 23;
$firstG: 239;
$firstB: 125;
$blue: rgb(23, 125, 239);
//$green: #2FF0D5;
$secondR: 47;
$secondG: 240;
$secondB: 213;
$green: rgb(47, 240, 213);
body{
background-color: #000;
}
#panel {
font-size: 0;
}
span {
font-size: 16px;
display: inline-block;
vertical-align: bottom;
width: 10px;
&:not(:first-of-type) {
margin-left: 2px;
}
}
$elements: 51;
$redDiv: ($firstR - $secondR) / $elements;
#if $redDiv < 0 {
$redDiv: $redDiv * -1
}
$greenDiv: ($firstG - $secondG) / $elements;
#if $greenDiv < 0 {
$greenDiv: $greenDiv * -1
}
$blueDiv: ($firstB - $secondB) / $elements;
#if $blueDiv < 0 {
$blueDiv: $blueDiv * -1
}
#for $i from 0 to $elements {
$redValue: $redDiv * $i;
$greenValue: $greenDiv * $i;
$blueValue: $blueDiv * $i;
span:nth-child(#{$i}) {
height: random(260) + px;
background-color: rgb($firstR + $redValue, $firstG + $greenValue, $firstB + $blueValue);
}
}
I converted the hexadecimal values to RGB here, then made separate variables for each red, green, blue value in both colors.
Subtract the second value from the first then divide by how many elements (this gives you the amount of change needed each iteration).
Make sure the values aren't negative with #if.
Calculate the change by multiplying by $i and then add/subtract that change depending upon which value was lesser (first or second). If first value is less then $first + $value, if second value is less then $first - $value.
This was the only part that needs to be changed depending on the colors, the rest will work for any RGB value.
Codepen: http://codepen.io/anon/pen/ezpmXJ
Let's say I have a simple flex container with 2 flex items where the flex items' sizes exceed the containers size - where flex-shrink will be used..like so:
.container {
width: 600px;
outline: 5px solid;
display: flex;
}
section {
flex: 0 1 600px;
background: salmon;
}
aside {
flex: 0 1 200px;
background: aqua;
}
<div class="container">
<section>
<h2>Main content here</h2>
</section>
<aside>
<h2>Some side content</h2>
</aside>
</div>
Codepen demo
In the above example: The container is 600px, the section flex-item has flex basis of 600px and the aside has flex-basis of 200px - so the negative space is 200px.
So being that both flex items have the same flex-shrink factor of 1 - I expected that both flex items would shrink by 100px with the section getting a width of 600px - 100px = 500px and the aside getting 200px - 100px = 100px
But the result was actually that the section shrinks by 150px to 450px and the aside shrinks by 50px to 150px
So then I looked at the spec and I found this:
Note: The flex shrink factor is multiplied by the flex base size when
distributing negative space. This distributes negative space in
proportion to how much the item is able to shrink, so that e.g. a
small item won’t shrink to zero before a larger item has been
noticeably reduced.
So now I understand that when calculating flex-shrink on a flex item not only is the flex shrink factor taken into account, but also the flex base size (here, defined by the flex-basis property)
The problem is that I can't seem to do the math to calculate flex-shrink.
So just to continue with the above example: say I change the shrink factor of the section to 2...
.container {
width: 600px;
outline: 5px solid;
display: flex;
}
section {
flex: 0 2 600px;
background: salmon;
}
aside {
flex: 0 1 200px;
background: aqua;
}
<div class="container">
<section>
<h2>Main content here</h2>
</section>
<aside>
<h2>Some side content</h2>
</aside>
</div>
Codepen demo #2
... the result is that section gets a width of 428px and aside gets a width of 121px
Can someone explain how to calculate this?
Neglecting lots of details, the algorithm is something like this
let sumScaledShrinkFactors = 0,
remainingFreeSpace = flexContainer.innerMainSize;
for (let item of flexItems) {
remainingFreeSpace -= item.outerFlexBasis;
item.scaledShrinkFactor = item.innerFlexBasis * item.flexShrinkFactor;
sumScaledShrinkFactors += item.scaledShrinkFactor;
}
for (let item of flexItems) {
let ratio = item.scaledShrinkFactor / sumScaledShrinkFactors;
item.innerWidth = item.innerFlexBasis + ratio * remainingFreeSpace;
}
So the formula is like
flexBasis * (1 + shrinkFactor / sumScaledShrinkFactors * remainingFreeSpace)
First case
1*600px + 1*200px ─┐ width
│ ───────
600px * (1 + 1 / 800px * -200px) = 450px
200px * (1 + 1 / 800px * -200px) = 150px
│ ───────
600px - (600px + 200px) ────┘ 600px
Second case
2*600px + 1*200px ──┐ width
│ ───────
600px * (1 + 2 / 1400px * -200px) ≈ 429px
200px * (1 + 1 / 1400px * -200px) ≈ 171px
│ ───────
600px - (600px + 200px) ─────┘ 600px
I want to create a fixed non-flexible very damn static grid of 1200px.
So I figured out, I need 90px for column-width, 12 columnts, 10px of gutter and 1200px of max-width.
Well.. the following are my settings and it gives me an error "invalid null opearation: 11 times null "
$susy: (
flow: ltr,
math: static,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 12,
gutters: 10px,
column-width: 90px,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: show,
color: rgba(#66f, .25),
output: overlay,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
style.scss>
#import "grids";
body{
#include container($susy);
max-width: 1200px;
border: solid thin red;
height:10px;
}
You need to specify gutters proportionally to your columns.
In this case:
gutters: 1/9,
The end result (being your columns 90px) would be gutters 10px wide. You can specify your gutters width in pixels by expressing it as a proportion.
As per the docs, you can speficy gutter width in pixels, by putting the column width as well. E.g.:
gutters: 10px/90px
Alhtough the result is exactly the same. And if you put in a value that doesn't match with your column width, you won't get the pixel width you say, but the appropriate fraction.
So having:
column-width: 100px,
gutters: 10px/50px,
will leave you with 20px wide gutters. Because of math. :)
Pen showing it working here.
And finally, your layout is 1190px wide and not 1200px because:
12 columns * 90px = 1080px
11 gutters * 10px = 110px.
1180px + 110px = 1190px.