I have an entertainment blog with a lot of pictures. Can someone please help me with a code that auto-numbers the pictures inside a post? (eg: www.chive.com, www.acidcow.com)
This is my CSS for pictures if it helps for anything...
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 0px solid $(image.border.color);
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}
Related
When I try to use "grid-template-columns" and "grid-column-gap" a green line appears under them and says it's not a known CSS 3 property. Also, IE and Firefox cant compile the site well. My IDE is visual studio 2015 here comes my code:
.gridContainer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding-top:150px;
grid-column-gap: 50px;
padding-bottom:150px;
}
.grid-item {
background-color: #99e4f5;
border: 1px solid rgba(0, 0, 0, 0.8);
font-size: 17px;
text-align: center;
border: 5px solid #ffffff;
box-shadow: 1px 1px 5px grey;
color: #676363;
Are there any alternatives to using?
thanks,
Saeed
I have my chart fiddle here. I want to make tooltip with an arrow. Can i do that in d3?attached fiddle of graph
css for the tooltip for now-
.hor_tooltip {
position: absolute;
width: 50px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
display:none
You can add
.hor_tooltip:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
See https://jsfiddle.net/c74eoo2b/12/
I've been trying to troubleshoot this for hours but I just don't understand what I'm doing wrong. Maybe it's not me and it's a glitch in codekit? I have built a scss button mixin.
#mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false) {
display: inline-block;
width: auto;
border: 0;
border-radius: 4px;
text-align: center;
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 1px 2px rgba(102,190,255,.75);
color: $textcolor;
text-decoration: none;
#include font(normal);
#include transition(box-shadow 150ms ease);
&:hover{
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
}
&:active{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset
}
// Background
#if ($background == 'blue') {
/* #include gradient(#1673b9, #125e97); */
background: blue;
} #else if ($background == 'grey') {
/* #include gradient($grey-light, $grey-dark); */
background: grey;
}
// Sizes
#if $size == small {
}
#if $size == medium {
height: 32px;
line-height: 32px;
padding: 0 18px;
font-size: 14px;
}
#if $size == large {
}
#if $fullWidth == true {
width: 100%;
display: block;
}
}
The sizes and full-size conditionals work just fine. But the Background does not. It just doesn't do anything. For now the Scss that uses it is:
<div id="main-header">
Create New Content
Download CSV
</div>
.btn{
&.create{
#include btn(blue);
}
&.download{
#include btn(grey);
}
}
With that, I should be seeing two different color buttons. The markup and Scss will be improved but this is what it is for testing purposes. It seems to work fine here: http://sassmeister.com/gist/da3707a3e03609f8991c
Any help or suggestions will be greatly appreciated. Thanks!
Oh, as I looked over this question, I noticed I pasted the mixin that has #if ($background == 'blue'){ I have tried that without single quotes and without parentheses.
The condition should be
if($background == blue)
Also you have 2 other mixins inside which you should resolve or remove
#include font(normal);
#include transition(box-shadow 150ms ease);
Here's the whole SCSS file:
$white:white;
#mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false)
{
&:hover
{
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
}
&:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
// Background
#if ($background == blue)
{
background: blue;
}
#else if ($background == 'grey')
{
background: grey;
}
// Sizes
#if $size == small
{
}
#if $size == medium
{
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
}
#if $size == large
{
}
#if $fullWidth == true
{
display: block;
width: 100%;
}
}
.btn
{
&.create
{
}
&.download
{
}
}
and its generated CSS:
.btn.create
{
background: blue;
border: 0;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
color: white;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
text-align: center;
text-decoration: none;
width: auto;
}
.btn.create:hover
{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.create:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
.btn.download
{
border: 0;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
color: white;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
text-align: center;
text-decoration: none;
width: auto;
}
.btn.download:hover
{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.download:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
I have a trouble that I can't solve in a blog of WordPress. I don't know if it's bug or they are in confilcts. Firstly, see the image:
http://i.imgur.com/K4gWjh9.png
Notice the 3D rounded border and the white and black shadow in this image. This image is above the author avatar image's box. I can't correct it. See the example of JSFiddle:
http://jsfiddle.net/ZUben/
I use the Graphene theme for Wordpress the which is updated:
http://www.khairul-syahir.com/wordpress-dev/graphene-theme#.UXCgoivwLRY
Follow my styles:
.gutter-right {
margin-right: 10px;
}
...
.post-avatar-wrap {
float: right;
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
...
.author-avatar-wrap {
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
Thank you!
Okay, here we go: set the image relative and also apply a z-index for this image which is lower than the z-index of the wrapper. Moreover we will have to apply the CSS3 border-styles to both, div and img.
So go and take a look at my fork of your fiddle: http://jsfiddle.net/ShwkP/
I've also created a separate class called border-styles in case we will have more elements with the same effect. Simply apply it to all elements to get this kind of border.
Remembar that this is CSS3 and will not work cross browsers, because neither border-radius nor box-shadow is fully supported!
I'm currently writing a mixin that would allow me to do a 3d box effect with layers of box-shadows.
The resulting code that gets returned would look something like this:
.someclass {
box-shadow: 1px 0 1px #203891, 0 1px 1px #3852B1, 2px 1px 1px #203891,
1px 2px 1px #3852B1, 3px 2px 1px #203891, 2px 3px 1px #3852B1;
}
this code is taken from css-tricks' buttons.
I need help appending/joining lists with a comma separation:
Given the following two lists:
$bottom: 1px 0 1px $bottomcolor
$right: 0 1px 1px $rightcolor
I would like to join them to get:
$joined: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor
here's what I got when using Sass' built in list functions:
append($bottom, $right, comma) => 1px, 0, 1px, red, 0 1px 1px red
join($bottom, $right, comma) => 1px, 0, 1px, red, 0, 1px, 1px, red
just realized why the above code didn't work because $bottom and $right aren't 2D lists, only 1D lists....
I ended up solving my mixin like so:
#import compass
=boxeffect($depth, $bottomcolor, $rightcolor)
$layers: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor
#for $i from 1 through $depth
$layers: append($layers, (#{$i + 1}px #{$i}px 1px $bottomcolor), comma)
$layers: append($layers, (#{$i}px #{$i + 1}px 1px $rightcolor), comma)
+box-shadow($layers)
.test
+boxeffect(2, #222222, #333333)
with the outcome of:
/* line 18, ../sass/temp.sass */
.test {
-webkit-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
-moz-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
}
This works as well:
$cat: ();
$a: 1px 0px url(http://domain.com);
$b: 0px 1px #bbb;
$cat: append( unquote( $a ), $b, comma );
Hope this helps.