Is it possible to achieve the following shadow effect in CSS?
It needs to go below an image/div.
The closest I have got so far is using
-webkit-box-shadow: 0px 20px 15px -10px #999;
-moz-box-shadow: 0px 20px 15px -10px #999;
box-shadow: 0px 20px 15px -10px #999;
This might not be a shadow per se, but I just generated this as a background via Ultimate CSS Gradient Generator
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 48%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(48%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 48%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
Multiple Box shadows are possible on one element, all you have to do is separate each box shadow with a comma. For example:
box-shadow: 5px 5px 5px grey, -5px 5px 5px blue, 5px -5px 5px orange;
This box shadow will produce 3 shadows, one in the top right with a color of grey, one in the bottom left with a color of blue, and one in the bottom right with a color of orange.
Here is the jsfiddle with the demo.
You can play around with the settings but to achieve those curves are quite hard and it might be easier with an image.
Use this code box-shadow: 0 45px 50px -50px #000000;
Related
I am trying to display an Image inside a QLabel on QT forms. I need that label to have only the top left and right corners to be rounded while the bottom 2 remain rectangular.
using style sheets I gave the border-radius a value and it worked. Howerver, the image inside that label remained rectangular. (the corner of the image hid the circular corner of the QLabel).
Searching around, i found that setting a mask to the image (pixmap) and drawing a RoundRect on it cause the corners to be circular.
that worked but it made all four corners of the image to be circular.
is there a way to make only the top part as circular?
this is how i made the edges of the pixmap circular:
QBitmap map(100,100); //my pixmap is 100x100
map.fill(Qt::color0);
QPainter painter( &map );
painter.setBrush(Qt::color1);
painter.drawRoundRect(0,0,100,100,20,20);
p.setMask(map);
ui->image1->setPixmap(p);
and this is how i made the QLabel top left and right corner circular
QString style = "border: 4px solid; \n";
style += "border-top-left-radius: 20px;\n";
style += "border-top-right-radius: 20px;";
ui->image1->setStyleSheet(style);
Your idea with the mask is not too bad. You just have to do some composite drawing to the mask, e.g.
QPainter painter(&map);
painter.setBrush(Qt::color1);
painter.drawRoundedRect(0, 0, 100, 40, 20, 20);
painter.drawRect(0, 20, 100, 100);
p.setMask(map);
I am trying to generate a random pastel colour.
Is it correct to say that a pastel colour has a low value/intensity value (HSV)? Therefore something like this should generate random pastel colours: Vec3b randPastel = Vec3b(rng.uniform(0, 180), rng.uniform(0, 255), rng.uniform(0, 50))
My current function fails. It only ever creates black BGR colours for some reason:
Vec3b randPastelBGR()
{
Mat hsv(1, 1, CV_8UC3);
cvtColor(hsv, hsv, CV_BGR2HSV);
hsv.at<Vec3b>(0, 0) = Vec3b(rng.uniform(0, 180), rng.uniform(0, 255), rng.uniform(0, 50));
cvtColor(hsv, hsv, CV_HSV2BGR);
return hsv.at<Vec3b>(0, 0);
}
Pastels are mostly white, i.e. they have low Saturation. Not zero, though, because that would be entirely white (or grey). As you noticed, with a low Value you get dark colors. You want a fairly high Value, and might not even want a random one. (Exactly which color parts have to be random, and why?)
I needed something similar. I just very quickly tried 105*Rand() + 150 for each value of RGB, and it seemed to work pretty well. That will give you values between 150 and 255, i.e. lighter colors. This wasn't in c++, but the software I'm using makes values of 0 to 1 for Rand().
I have the following image:
I would like to detect the red rectangle using cv::inRange method and HSV color space.
int H_MIN = 0;
int H_MAX = 10;
int S_MIN = 70;
int S_MAX = 255;
int V_MIN = 50;
int V_MAX = 255;
cv::cvtColor( input, imageHSV, cv::COLOR_BGR2HSV );
cv::inRange( imageHSV, cv::Scalar( H_MIN, S_MIN, V_MIN ), cv::Scalar( H_MAX, S_MAX, V_MAX ), imgThreshold0 );
I already created dynamic trackbars in order to change the values for HSV, but I can't get the desired result.
Any suggestion for best values (and maybe filters) to use?
In HSV space, the red color wraps around 180. So you need the H values to be both in [0,10] and [170, 180].
Try this:
#include <opencv2\opencv.hpp>
using namespace cv;
int main()
{
Mat3b bgr = imread("path_to_image");
Mat3b hsv;
cvtColor(bgr, hsv, COLOR_BGR2HSV);
Mat1b mask1, mask2;
inRange(hsv, Scalar(0, 70, 50), Scalar(10, 255, 255), mask1);
inRange(hsv, Scalar(170, 70, 50), Scalar(180, 255, 255), mask2);
Mat1b mask = mask1 | mask2;
imshow("Mask", mask);
waitKey();
return 0;
}
Your previous result:
Result adding range [170, 180]:
Another interesting approach which needs to check a single range only is:
invert the BGR image
convert to HSV
look for cyan color
This idea has been proposed by fmw42 and kindly pointed out by Mark Setchell. Thank you very much for that.
#include <opencv2\opencv.hpp>
using namespace cv;
int main()
{
Mat3b bgr = imread("path_to_image");
Mat3b bgr_inv = ~bgr;
Mat3b hsv_inv;
cvtColor(bgr_inv, hsv_inv, COLOR_BGR2HSV);
Mat1b mask;
inRange(hsv_inv, Scalar(90 - 10, 70, 50), Scalar(90 + 10, 255, 255), mask); // Cyan is 90
imshow("Mask", mask);
waitKey();
return 0;
}
While working with dominant colors such as red, blue, green and yellow; analyzing the two color channels of the LAB color space keeps things simple. All you need to do is apply a suitable threshold on either of the two color channels.
1. Detecting Red color
Background :
The LAB color space represents:
the brightness value in the image in the primary channel (L-channel)
while colors are expressed in the two remaining channels:
the color variations between red and green are expressed in the secondary channel (A-channel)
the color variations between yellow and blue are expressed in the third channel (B-channel)
Code :
import cv2
img = cv2.imread('red.png')
# convert to LAB color space
lab = cv2.cvtColor(img, cv2.COLOR_BGR2LAB)
# Perform Otsu threshold on the A-channel
th = cv2.threshold(lab[:,:,1], 127, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)[1]
Result:
I have placed the LAB converted image and the threshold image besides each other.
2. Detecting Blue color
Now lets see how to detect blue color
Sample image:
Since I am working with blue color:
Analyze the B-channel (since it expresses blue color better)
Perform inverse threshold to make the blue region appear white
(Note: the code changes below compared to the one above)
Code :
import cv2
img = cv2.imread('blue.jpg')
# convert to LAB color space
lab = cv2.cvtColor(img, cv2.COLOR_BGR2LAB)
# Perform Otsu threshold on the A-channel
th = cv2.threshold(lab[:,:,2], 127, 255, cv2.THRESH_BINARY_INV + cv2.THRESH_OTSU)[1]
Result:
Again, stacking the LAB and final image:
Conclusion :
Similar processing can be performed on green and yellow colors
Moreover segmenting a range of one of these dominant colors is also much simpler.
I want to identify and extract the contour of the largest leaf of the following image using OpenCV and C++.
I applied Canny edge detector to the image and got the following result.
Canny(img_src, img_edge_detected, 20, 60, 3);
Now I want to extract the largest contour (largest leaf) form the image and draw the contour line, but the problem here is the edge line of the largest leaf is not continuous. So I looked in to dialate and morphological close but using those functions I couldn't get a good result to extract the area. Is there any way to get the largest contour in such image?
Note that here I cannot use template matching or any masking kind of things because my final intention is to built a system where a user can upload an image and get the species of the plant. So the system doesn't have any prior idea about the shape of the leaf that user is going to upload.
Please tell me how to find and draw the largest contour here if it is possible.
Thanks.
cant you use hsv color threshoding to track only that leaf and then you can straight away use minmaxloc function to get the area of the largest contour.just an idea try doing it like that.it will work.good luck
Same thing i will do in java please convert it into c++, here BGR to convert HSV then after apply the combination of the yellow, green and brown with specified range and simply perfom bitwise or operation. it will be give to you not zero pixles using opencv function Core.findNonZero(Mat src, Mat dst);
Imgproc.cvtColor(mRgba, mHSV, Imgproc.COLOR_BGR2HSV, 4);
//Yellow
Core.inRange(mHSV, new Scalar(25, 80, 80), new Scalar(36, 255, 255), yellow);
//Green
Core.inRange(mHSV, new Scalar(37, 80, 80), new Scalar(70, 255, 255), green);
//Brown
Core.inRange(mHSV, new Scalar(10, 80, 80), new Scalar(30, 200, 200), brown);
// logical OR mask
Core.bitwise_or(yellow, green, green);
Core.bitwise_or(green, brown, mask);
Imgproc.dilate(mask, mask, new Mat());
// Find non zero pixels
pts = Mat.zeros(mask.size(), mask.type());
Core.findNonZero(mask, pts);
return mask;
Hey guys I ran into an error with my regex that needs to be fixed
when I hit a .. in url, I'm getting a match and I shouldn't
here is the regex
~\b(?::url|:\surl)\s*\(\s*(["\']?+)\K(?:/(?!/)|(?=[\s>]|\1))~i
I thought it should be
~\b(?::url|:\surl)\s*\(\s*(["\']?+)\K(?:/(?!/|..)|(?=[\s>]|\1))~i
but that doesn't seem to work?
Things it should match
background:url('/foo.jpg') repeat-y top center;
background:url("/foo.jpg") repeat-y top center;
background:url(/foo.jpg) repeat-y top center;
background:url('foo.jpg') repeat-y top center;
background:url("foo.jpg") repeat-y top center;
background:url(foo.jpg) repeat-y top center;
background: url('/foo.jpg') repeat-y top center;
background: url("/foo.jpg") repeat-y top center;
background: url(/foo.jpg) repeat-y top center;
Should not match but does (and does)
background:url('../foo.jpg') repeat-y top center;
background:url("../foo.jpg") repeat-y top center;
background:url(../foo.jpg) repeat-y top center;
background: url('../foo.jpg') repeat-y top center;
background: url("../foo.jpg") repeat-y top center;
background: url(../foo.jpg) repeat-y top center;
and using (?!/|\.\.) still seems to match
Figured it out, my exclusion needed to behind my look back
~\b(?::url|:\surl)\s*\(\s*(["\']?+)(?:(?!\.\./))\K(?:/(?!/)|(?=[\s>]|\1))~i