As a designer I can extract this CSS code from Illustrator:
.test
{
background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
position : absolute ;
left : 215px;
top : 151px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
}
I tried in the browser like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/* css code here */
</style>
</head>
<body>
<div class="test" id="test"> </div>
</body>
</html>
What am i missing?
It is a gradient rectangle, is should look like this:
You need to set the width and height of the element with the gradient applied to it in the CSS:
.test {
background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
position : absolute ;
left : 100px;
top : 50px;
width:300px;
height: 150px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
}
<div class="test" id="test"> </div>
You have forgot to set width and height.. check updated snippet below..
.test
{
background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
/* position : absolute ;
left : 215px;
top : 151px;*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
width: 300px;
height: 200px;
}
<div class="test"></div>
Related
The server responses Json that encoded to utf8. The code below works only if I use json.decode twice. After first decoding the utf8 string gives a string instead of a Map. Why do I have to use json.decode twice to get the Map? Is there a more clean way of doing this?
final bytes = (await ipfsClient.cat(Hash(cid: ipfsCid))).data;
final decodedBytes = utf8.decode(bytes);
final alreadyDecoded = json.decode(decodedBytes);
final accountIpfs = json.decode(alreadyDecoded);
accountIpfs['profile'] = newCid;
print('${bytes.runtimeType}, $bytes');
print('${decodedBytes.runtimeType}, $decodedBytes');
print('${alreadyDecoded.runtimeType}, $alreadyDecoded');
print('${accountIpfs.runtimeType}, $accountIpfs');
Uint8List, [34, 123, 92, 34, 115, 111, 99, 105, 97, 108, 95, 97, 99, 99, 111, 117, 110, 116, 92, 34, 58, 92, 34, 81, 109, 87, 113, 104, 122, 110, 81, 52, 72, 107, 85, 71, 112, 116, 99, 52, 54, 86, 90, 87, 97, 98, 110, 111, 112, 83, 122, 90, 52, 82, 76, 74, 88, 70, 117, 111, 115, 110, 77, 121, 120, 117, 106, 118, 110, 92, 34, 44, 92, 34, 112, 114, 111, 102, 105, 108, 101, 92, 34, 58, 92, 34, 81, 109, 99, 56, 89, 72, 54, 117, 80, 82, 51, 54, 104, 113, 53, 51, 66, 118, 65, 99, 110, 101, 104, 116, 102, 72, 54, 86, 116, 70, 78, 69, 53, 111, 75, 116, 99, 113, 80, 82, 51, 102, 74, 97, 53, 70, 92, 34, 44, 92, 34, 97, 98, 111, 117, 116, 92, 34, 58, 92, 34, 81, 109, 90, 86, 110, 106, 97, 117, 114, 71, 49, 111, 77, 87, 68, 54, 121, 103, 86, 87, 110, 83, 106, 83, 49, 116, 89, 106, 70, 101, 97, 99, 82, 112, 51, 116, 97, 83, 112, 120, 52, 50, 49, 84, 53, 75, 92, 34, 44, 92, 34, 98, 117, 115, 105, 110, 101, 115, 115, 92, 34, 58, 92, 34, 81, 109, 82, 110, 88, 81, 82, 56, 117, 76, 57, 85, 76, 71, 116, 84, 98, 121, 98, 120, 109, 52, 88, 57, 54, 107, 52, 55, 53, 66, 101, 118, 103, 57, 100, 52, 90, 113, 86, 50, 99, 99, 86, 67, 69, 83, 92, 34, 125, 34]
String, "{\"social_account\":\"QmWqhznQ4HkUGptc46VZWabnopSzZ4RLJXFuosnMyxujvn\",\"profile\":\"Qmc8YH6uPR36hq53BvAcnehtfH6VtFNE5oKtcqPR3fJa5F\",\"about\":\"QmZVnjaurG1oMWD6ygVWnSjS1tYjFeacRp3taSpx421T5K\",\"business\":\"QmRnXQR8uL9ULGtTbybxm4X96k475Bevg9d4ZqV2ccVCES\"}"
String, {"social_account":"QmWqhznQ4HkUGptc46VZWabnopSzZ4RLJXFuosnMyxujvn","profile":"Qmc8YH6uPR36hq53BvAcnehtfH6VtFNE5oKtcqPR3fJa5F","about":"QmZVnjaurG1oMWD6ygVWnSjS1tYjFeacRp3taSpx421T5K","business":"QmRnXQR8uL9ULGtTbybxm4X96k475Bevg9d4ZqV2ccVCES"}
_InternalLinkedHashMap<String, dynamic>, {social_account: QmWqhznQ4HkUGptc46VZWabnopSzZ4RLJXFuosnMyxujvn, profile: Qmc8YH6uPR36hq53BvAcnehtfH6VtFNE5oKtcqPR3fJa5F, about: QmZVnjaurG1oMWD6ygVWnSjS1tYjFeacRp3taSpx421T5K, business: QmRnXQR8uL9ULGtTbybxm4X96k475Bevg9d4ZqV2ccVCES}
I'm using mysql2/promise to run some sql queries. Here is my query:
requests = await conn.execute(
'SELECT * FROM friend_requests WHERE (requester=? AND acceptor=?) OR (requester=? AND acceptor=?)',
[ 1, 2, 2, 1]
);
When I run this command I get the following results:
{
"message": [
[],
[
{
"_buf": {
"type": "Buffer",
"data": [
1,
0,
0,
1,
3,
77,
0,
0,
2,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
12,
224,
0,
0,
4,
0,
0,
253,
3,
80,
0,
0,
0,
75,
0,
0,
3,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
8,
97,
99,
99,
101,
112,
116,
111,
114,
8,
97,
99,
99,
101,
112,
116,
111,
114,
12,
224,
0,
0,
4,
0,
0,
253,
11,
80,
0,
0,
0,
73,
0,
0,
4,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
7,
99,
114,
101,
97,
116,
101,
100,
7,
99,
114,
101,
97,
116,
101,
100,
12,
63,
0,
19,
0,
0,
0,
7,
128,
4,
0,
0,
0,
5,
0,
0,
5,
254,
0,
0,
34,
0,
5,
0,
0,
6,
254,
0,
0,
34,
0
]
},
"_clientEncoding": "utf8",
"_catalogLength": 3,
"_catalogStart": 10,
"_schemaLength": 7,
"_schemaStart": 14,
"_tableLength": 15,
"_tableStart": 22,
"_orgTableLength": 15,
"_orgTableStart": 38,
"_orgNameLength": 9,
"_orgNameStart": 64,
"characterSet": 224,
"encoding": "utf8",
"name": "requester",
"columnLength": 1024,
"columnType": 253,
"flags": 20483,
"decimals": 0
},
{
"_buf": {
"type": "Buffer",
"data": [
1,
0,
0,
1,
3,
77,
0,
0,
2,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
12,
224,
0,
0,
4,
0,
0,
253,
3,
80,
0,
0,
0,
75,
0,
0,
3,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
8,
97,
99,
99,
101,
112,
116,
111,
114,
8,
97,
99,
99,
101,
112,
116,
111,
114,
12,
224,
0,
0,
4,
0,
0,
253,
11,
80,
0,
0,
0,
73,
0,
0,
4,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
7,
99,
114,
101,
97,
116,
101,
100,
7,
99,
114,
101,
97,
116,
101,
100,
12,
63,
0,
19,
0,
0,
0,
7,
128,
4,
0,
0,
0,
5,
0,
0,
5,
254,
0,
0,
34,
0,
5,
0,
0,
6,
254,
0,
0,
34,
0
]
},
"_clientEncoding": "utf8",
"_catalogLength": 3,
"_catalogStart": 91,
"_schemaLength": 7,
"_schemaStart": 95,
"_tableLength": 15,
"_tableStart": 103,
"_orgTableLength": 15,
"_orgTableStart": 119,
"_orgNameLength": 8,
"_orgNameStart": 144,
"characterSet": 224,
"encoding": "utf8",
"name": "acceptor",
"columnLength": 1024,
"columnType": 253,
"flags": 20491,
"decimals": 0
},
{
"_buf": {
"type": "Buffer",
"data": [
1,
0,
0,
1,
3,
77,
0,
0,
2,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
12,
224,
0,
0,
4,
0,
0,
253,
3,
80,
0,
0,
0,
75,
0,
0,
3,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
8,
97,
99,
99,
101,
112,
116,
111,
114,
8,
97,
99,
99,
101,
112,
116,
111,
114,
12,
224,
0,
0,
4,
0,
0,
253,
11,
80,
0,
0,
0,
73,
0,
0,
4,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
7,
99,
114,
101,
97,
116,
101,
100,
7,
99,
114,
101,
97,
116,
101,
100,
12,
63,
0,
19,
0,
0,
0,
7,
128,
4,
0,
0,
0,
5,
0,
0,
5,
254,
0,
0,
34,
0,
5,
0,
0,
6,
254,
0,
0,
34,
0
]
},
"_clientEncoding": "utf8",
"_catalogLength": 3,
"_catalogStart": 170,
"_schemaLength": 7,
"_schemaStart": 174,
"_tableLength": 15,
"_tableStart": 182,
"_orgTableLength": 15,
"_orgTableStart": 198,
"_orgNameLength": 7,
"_orgNameStart": 222,
"characterSet": 63,
"encoding": "binary",
"name": "created",
"columnLength": 19,
"columnType": 7,
"flags": 1152,
"decimals": 0
}
]
]
}
What is this? I thought I would get something like requests[0].column_name. Am I doing the query wrong?
It turns out await conn.execute will only return the fields of the table if there are 0 results.
Therefore, you have to specify rows as a variable in order to get the empty array of rows as follows:
const [rows, fields] = await conn.execute(
'SELECT * FROM friend_requests WHERE (requester=? AND acceptor=?) OR (requester=? AND acceptor=?)',
[ 1, 2, 2, 1]
);
Now rows will have the rows returned in the query and fields is an array of fields (the buffer that is being returned in the question).
How would one create the following button using CSS?
The fact that it is skewed is not the issue. The part I'm not sure about is the diagonal split in color that's positioned from corner to corner. Im not sure how to define a gradient in such a way that it would work for all button dimensions responsively.
I have the following so far, for a skewed button without the diagonal difference in color.
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
But I'm sure a lot of that will all have to change.
Here is a gradient solution that will work with any size:
button.btn {
color: white;
background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>
Use Gradient CSS generator to get any sort of gradient backgrounds..
button.btn {
color: white;
background: rgba(248, 80, 50, 1);
background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn"><span>View Demo</span></button>
Try this:
.btn{
background-color: #34ADFF;
background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
border:0px;
padding:20px 25px;
font-size:17px;
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
transform:skew(-30deg);
color:#fff;
margin-left:20px;
}
<button class="btn" ><span>View Demo</span></button>
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
Is it possible to create a two dimensional gradient like the following image?
Currently, I can achieve only one of the following two i.e to right Or bottom
background: rgba(247,149,29,1);
background: -moz-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(247,149,29,1)), color-stop(16%, rgba(247,149,29,1)), color-stop(17%, rgba(237,28,35,1)), color-stop(33%, rgba(237,28,35,1)), color-stop(34%, rgba(43,56,144,1)), color-stop(56%, rgba(43,56,144,1)), color-stop(56%, rgba(27,118,188,1)), color-stop(57%, rgba(27,118,188,1)), color-stop(73%, rgba(27,118,188,1)), color-stop(73%, rgba(0,167,156,1)), color-stop(100%, rgba(0,167,156,1)));
background: -webkit-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -o-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -ms-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: linear-gradient(to right, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 20%, rgba(237,28,35,1) 20%, rgba(237,28,35,1) 40%, rgba(43,56,144,1) 40%, rgba(43,56,144,1) 60%, rgba(27,118,188,1) 60%, rgba(27,118,188,1) 80%, rgba(0,167,156,1) 80%, rgba(0,167,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7951d', endColorstr='#00a79c', GradientType=1 );
I want to get a right bottom gradient with mutli color on top and black on bottom.
Here are a couple of possible variants:
1- Using Multiple Backgrounds:
We can draw this shape by applying multiple background images on a div element and by precisely controlling their size.
Consider the following styles:
background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%,
#ed1c24 40%, #2b3990 40%,
#2b3990 60%, #1b75bc 60%,
#1b75bc 80%, #00a79d 80%),
linear-gradient(#333, #333);
background-size: 100% 8px, 100% 100%;
background-repeat: no-repeat;
We are using CSS3 linear-gradient() to create 2 different background images and we have used background-size property to limit the size of first image.
Note: The order of images in background-image property is important. Change in the order wouldn't produce the desired output.
Output Image:
Working Demo:
.box {
height: 100px;
background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%),
linear-gradient(#333, #333);
background-size: 100% 8px, 100% 100%;
background-repeat: no-repeat;
padding: 20px;
}
<div class="box"></div>
2- Using Pseudo Elements:
We can draw top border using a pseudo element.
Create a layer with ::before or ::after pseudo element and place it on above the parent element with position: absolute.
Create the desired background using CSS3 linear-gradient and apply this on the layer create above.
Working Demo:
.box {
position: relative;
background: #333;
padding: 20px;
height: 60px;
}
.box::before {
background: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%) no-repeat;
position: absolute;
content: '';
height: 8px;
width: 100%;
left: 0;
top: 0;
}
<div class="box"></div>
You can use :after element to get something like the image you provided:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.gradient {
position: relative;
height: 80px;
background: rgba(247, 149, 29, 1);
background: -moz-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -webkit-gradient(
left top,
right top,
color-stop(0%, rgba(247, 149, 29, 1)),
color-stop(16%, rgba(247, 149, 29, 1)),
color-stop(17%, rgba(237, 28, 35, 1)),
color-stop(33%, rgba(237, 28, 35, 1)),
color-stop(34%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(27, 118, 188, 1)),
color-stop(57%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(0, 167, 156, 1)),
color-stop(100%, rgba(0, 167, 156, 1))
);
background: -webkit-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -o-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -ms-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: linear-gradient(
to right,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 20%,
rgba(237, 28, 35, 1) 20%,
rgba(237, 28, 35, 1) 40%,
rgba(43, 56, 144, 1) 40%,
rgba(43, 56, 144, 1) 60%,
rgba(27, 118, 188, 1) 60%,
rgba(27, 118, 188, 1) 80%,
rgba(0, 167, 156, 1) 80%,
rgba(0, 167, 156, 1) 100%
);
}
.gradient:after {
content: '';
bottom: 0;
position: absolute;
height: 80%;
width: 100%;
background: #333;
}
<div class="gradient">
</div>
EDIT: Since you want to show some text, it's better to use inner div instead of :after pseudo-element:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.gradient {
position: relative;
height: 80px;
background: rgba(247, 149, 29, 1);
background: -moz-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -webkit-gradient(
left top,
right top,
color-stop(0%, rgba(247, 149, 29, 1)),
color-stop(16%, rgba(247, 149, 29, 1)),
color-stop(17%, rgba(237, 28, 35, 1)),
color-stop(33%, rgba(237, 28, 35, 1)),
color-stop(34%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(27, 118, 188, 1)),
color-stop(57%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(0, 167, 156, 1)),
color-stop(100%, rgba(0, 167, 156, 1))
);
background: -webkit-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -o-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -ms-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: linear-gradient(
to right,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 20%,
rgba(237, 28, 35, 1) 20%,
rgba(237, 28, 35, 1) 40%,
rgba(43, 56, 144, 1) 40%,
rgba(43, 56, 144, 1) 60%,
rgba(27, 118, 188, 1) 60%,
rgba(27, 118, 188, 1) 80%,
rgba(0, 167, 156, 1) 80%,
rgba(0, 167, 156, 1) 100%
);
}
.text {
background: #333;
color: #fff;
height: 80%;
width: 100%;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
padding: 10px;
}
<div class="gradient">
<div class="text">Lorem Ipsum</div>
</div>
І use html2canvas for save div as image.
Сan i save div with CSS transform: perspective?
I mean something like this:
#div2 {
background: linear-gradient(to right, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
width: 60px;
height: 90px;
transform: perspective(200px) rotateY(45deg);
}
or
#div2 {
background: linear-gradient(to right, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
width: 60px;
height: 90px;
transform: matrix3d(1, 0, 0, -0.008, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0.23, 1);
}