Is there a more efficient way of declaring and using these (very similar/repetitive) CSS classes:
div.rounded20
{
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
div.rounded15
{
-webkit-border-radius:15px;
-moz-border-radius:15px;
}
Say maybe with something along the lines of:
div.rounded(#Y)
{
-webkit-border-radius:#Ypx;
-moz-border-radius:#Ypx;
}
And the actual class usage being
<div class="rounded(15)" ...>
Any suggestions are welcomed, including using jquery or an alternate styling method...
you should look at sass/compass solutions which are designed to do exactly that. They also have arithmetic operations and support for variables and colors.
i don't believe there's a way to do that with straight css, as it is static. however, there's definitely a way to do it with jquery. you can set a named function, say SetRoundedCorners(element, radius) and do something like this:
function SetRoundedCorners (element, radius) {
$(element).css("-webkit-border-radius:" + radius +";
-moz-border-radius:" + radius +";");
}
$("#myelement").click(function(){
SetRoundedCorners(this, someRadius);
});
haven't tested it, but something along those lines should work. good luck!
EDIT: There's also a jquery function you could use to round the corners:
$(document).ready(function(){
$("#box1").corner();
});
which can be found here: http://www.malsup.com/jquery/corner/
Maybe something like this...
HTML:
<div class="rounded 15"></div>
<div class="rounded 45"></div>
jQuery:
$("div.rounded").each
(
function()
{
// Calculate the radius as the number at the end of the class name.
var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1");
// Set both CSS properties to the calculated radius.
$(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"});
}
);
I use a CSS compiler... that basically generates your CSS files for you. The one I use is proprietary but it works very similar to this one (PHP)
By using a compiler you can define variables, loops, add/subtract/multiply etc. as well as (if you are hardcore) build dynamic color palletes by manipulating the RGB of your "known" colors.. e.g. if you want a color that is 10% lighter, 50% darker, or the inverse.
Related
Apologies if this shows how much of a novice I am, but I'd like to know more about dynamic variables and CSS in Vue. I'd like to create a system where each time a button is pressed, the letters of the button label become further apart.
Inside a component is it possible to use a counter script such as:
<script>
export default {
name: 'Counter',
data() {
return {
count: 3,
}
},
methods: {
intrement() {
this.count += 1;
}
}
}
</script>
And then use the count integer value to change CSS text spacing for example?
So that in the template, I could use:
<template>
<header>
<div>
<button class="header_button" style="letter-spacing: `v-bind(count) + ch`;">MYBUTTON</button>
</div>
</header>
</template>
I appreciate this is a strange and specific example, but if anyone could give me some feedback as to why this doesn't work, as well as suggestions on how I could achieve this I'd be super appreciative.
In that case, you can directly use the following
<button :style="`letter-spacing: ${count}ch;`">
Here is a playground.
PS: :style is a shorthand for v-bind:style as explained here.
v-bind for CSS (mixing script + style) is also a thing.
Here, you're only using script + template combo, so an interpolation is enough.
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
I have the code at the bottom of the page in my sass. In my html I am targeting it as follows
class=" transform rotate-5 zoom-2 ......"
the problem is that the transform properties are clashing and aren't applying scale and rotate to the same div tag, I'm either getting one or the other.
I thought I could change this by using the #extend property and something like,
&.rotate-#{$i}
{#extend &.skew-#{$i}, &.zoom-#{$i}, &.zoom--#{$i};
transform: rotate($rotate#{deg});
}
but so far I've had no luck, if anyone can help it'd be greatly appreciated.
.transform {
overflow:hidden;
#for $i from 1 through 360 {
$rotate: $i;
$skew: $i;
$zoom: $i;
&.rotate-#{$i} {
transform: rotate($rotate#{deg});
}
&.skew-#{$i} {
transform: skew($skew#{deg});
}
&.zoom-#{$i} {
transform: scale($zoom,0);
}
&.zoom--#{$i} {
transform: scale(-$zoom,0);
}
}
}
I'm a big fan of utility classes that I thought easier to debug and to build with. But here it doesn't seem to be a good idea:
1) You are creating 360 * 4 selectors, yet you will probably only use 10-20 of them. It is a bit overkill.
2) As you describe it, the transform property values do not "combine" well, at least for what you are looking for. Even atomic CSS, which pushes very far the utility classes approach, specificies that combining different values of filter (for instance) needs creating a custom value / class.
I understand that it is not really a good answer, at least not the answer you were looking for, but if you want to keep your CSS only approach, I suggest you adopt a more "object-oriented" method for this issue and set your transform property directly in the css of your object, for instance with this mixin:
#mixin transform($rotate, $skew, $zoom) {
transform: rotate($rotate#{deg}) skew($skew#{deg}) scale($zoom,0) scale(-$zoom,0);
}
I have a document with a color property that I want to use as the background for a div. I currently do the following and it works:
<li class="task" style="background-color: {{statusColor}}">
The color is saved as a hex value and I would like to add transparency to it. I read that it is possible to do this with less:
.task{
#result: fade(red, 50%);
background-color: #result;
}
Is there a way to use the {{statusColor}} as the argument for the fade() function?
You are correct that less can add transparency with fade(). The problem with that approach is that less is part of the meteor build process and therefor cannot possibly know which document's statusColor to use. In other words, your .less files are compiled to .css at build-time, not run-time.
So you either need to store your colors in rgb format so that you can use background-color: rgba(r,g,b,a); or do the conversion on the front-end.
Here is some code to convert from hex to rgba: https://stackoverflow.com/a/19663620/211727
You could use it in a helper like this:
Template.task.helpers({
statusColorRGBA: function(hex) {
return 'rgba(' + parseInt(hex.slice(-6,-4),16)
+ ',' + parseInt(hex.slice(-4,-2),16)
+ ',' + parseInt(hex.slice(-2),16)
+',0.5)';
}
});
Usage:
<li class="task" style="background-color: {{statusColorRGBA statusColor}}">
FYI, there is currently no way to specify in alpha channel with hex notation: https://stackoverflow.com/a/31029864/211727
I'm looking to set the background-image (or even render an image via the pseudo elements :after or :before) to the value, which will be a URL, of a rel attribute, but only in certain cases (this is a cloud file listing). For example:
HTML:
<div class="icon ${fileExtension}" rel="${fileURL}"></div>
It would be great if I could do something like this:
CSS:
.icon.png,
.icon.jpg,
.icon.jpeg,
.icon.bmp,
.icon.gif { background-image: attr(rel,url); }
... but obviously that doesn't work as, if I'm not mistaken, the attr() CSS function only works inside pseudo element blocks.
I know there are ways of doing this using conditional JSP or even jQuery logic, but I'd like to figure out a neat way of doing it via CSS3, since I'm only concerned with modern browsers at the moment anyway.
Also, I don't want to explicitly set the background image to the URL or create an <img> element, because by default if the file is not a supported image, I'd rather display a predetermined set of icons.
Using
.icon:after{ content: ""attr(rel)""; }
displays the rel value as text.
A jQuery solution is to add the background-image (taken from the rel value) as inline CSS:
jQuery(function($) {
$('.icon').each(function() {
var $this = $(this);
$this.css('background-image', 'url(' + $this.attr('rel') + ')');
});
});
I've tried to do something using jQuery but i don't exactly understand what you want so i can't go on with my code. So far i've done only this.
EDITED I hope it's exactly what you need
$(function(){
var terms = new Array('png','jpg','jpeg','bmp','gif');
$('.icon').each(function(){
var t = $(this),
rel = t.attr('rel'),
cls = t.attr('class');
cls = cls.split(' ');
for (var i=0; i < terms.length; i++) {
if (terms[i] == cls[1]) {
t.css('background-image','url('+rel+')');
}
}
});
});
if you can give me a better example, to undestand exactly what you want, i hope somebody from here will be able to solve your problem.
Regards,
Stefan
I've decided to go the jQuery route, and used a combination of #ryanve and #stefanz answers. Thanks guys
$(document).ready(function() {
$(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) {
var bg = 'url(' + $(this).attr("rel") + ')';
$(this).css('background-image', bg);
});
});
I think this is relatively neat/concise and works well for my needs. Feel free to comment on efficiency, methodology, etc.